У меня есть большой набор данных, которые нужно перечислить в antd select box
.
список почти 126463 номеров записей
пример: ['gmail.com', 'yahoo.com', 'xyz.com'......]
Я использую React и поле выбора для отображения этих многих данных. но он перестает отвечать на запросы и браузер зависает.
Может ли кто-нибудь помочь мне, как обрабатывать эти большие данные для отображения в поле выбора antd?
Код:
import React, { Component } from 'react';
import { Select } from 'antd';
import axios from 'axios';
export class EmailData extends React {
constructor(props) {
super(props);
this.state = {
email_domain_list: []
}
}
componentWillMount() {
this.listOutEmailDomain()
}
listOutEmailDomain() {
const getEmailDomain = {
method: "GET",
url: 'API TO GET EMAIL DOMAINS',
headers: {
"Content-Type": "application/json"
},
};
let resp = await axios(getEmailDomain);
if (resp) {
this.setState({
email_domain_list: resp.data.data
});
}
}
render(){
return <div>
<h6 className="email"><b>Email Data</b></h6>
<div>
<Select
showSearch
mode="tags"
size="large"
id={fieldConstants.emailDomain}
value={this.state.email_domain}
onChange={(e) => this.emailDomainChange(e)}
style={{ width: 390, marginLeft: 10 }} >
{
this.state.email_domain_list.map((item, index) => {
return (
<Option value={item} key={index}>{item}</Option>
)
})
}
</Select>
</div>
</div>
}
}