Antd 选择搜索框不呈现匹配项 [英] Antd Select Search Box not rendering the matches
问题描述
我有产品数据,我正在使用搜索值过滤数据,然后使用过滤后的数据呈现选项.产品数据来自全球 redux 商店作为道具.出于某种原因,下拉列表仅在搜索值为空时显示数据,当我开始输入时,filteredData
会更新并且组件也会重新渲染,但选项不显示数据.
我已经检查过是否使用了正确的 filteredData
来映射选项.即使重新渲染组件,这些选项似乎也不会渲染.
请看下面的代码:
从'react'导入React;//从 'react' 导入 {useState};从'antd'导入{选择};从'react-redux'导入{connect};从'common/actions/fetchData'导入{fetchProductsAsync};const {选项} = 选择;class SelectOptions 扩展 React.Component {状态 = {过滤数据:[],值:未定义,};componentDidMount() {const {fetchProductsAsync} = this.props;fetchProductsAsync();const {products} = this.props;this.setState({filteredData: products || []});}componentDidUpdate() {console.log(this.state.filteredData);}filterData = (值) =>{const {products} = this.props;const filData = products.filter((prod) => {返回 prod.name.includes(value);});//console.log(filData);this.setState({filteredData: filData});};handleSearch = (值) =>{const {products} = this.props;如果(值){//this.setState({value});this.filterData(value);//console.log('yes');} 别的 {console.log('空');this.setState({filteredData: products});this.forceUpdate();}};handleChange = (值) =>{//console.log(value);this.setState({value});};使成为() {const {others} = this.props;//console.log(this.state.filteredData);const 选项 = this.state.filteredData.map((item, index) => {控制台日志(项目);返回 (<选项值={item.value ||item[others.key] ||项目}>{others.customTitle ?(<text style={{fontSize: 13, fontWeight: 'bold'}}>{item[others.customTitle]}</text>) : (item.label ||item[others.key] ||物品)}{others.dataKeys ?(<div className="row";style={{flexWrap: 'wrap'}}>{others.dataKeys.map((i) => (<text style={{fontSize: 11, marginLeft: 5, marginRight: 5}}>{item[i]}</text>))}
) : 空值}</选项>);});返回 (<选择显示搜索onSearch={this.handleSearch}//占位符=选择"//key={this.state.filteredData.length}值={this.state.value}onChange={this.handleChange}>{选项}选择>);}}const mapStateToProps = (状态) =>{返回 {产品:state.data.products ||[]};};导出默认连接(mapStateToProps,{fetchProductsAsync})(SelectOptions);
尝试在 Select 组件上设置此道具 filterOption={false}
I have the data of products, and I am filtering the data using a search value and then rendering the options using that filtered data. The products data is coming from the global redux store as a prop. For some reason, the dropdown shows data only when the search value is null, when I start typing, the filteredData
is updated and the component get re-rendered as well, but the options show no data.
I have checked whether the right filteredData
is used to map over the options. The options does not seem to render even when the component is re-rendered.
Please have a look at the code below :
import React from 'react';
// import {useState} from 'react';
import {Select} from 'antd';
import {connect} from 'react-redux';
import {fetchProductsAsync} from 'common/actions/fetchData';
const {Option} = Select;
class SelectOptions extends React.Component {
state = {
filteredData: [],
value: undefined,
};
componentDidMount() {
const {fetchProductsAsync} = this.props;
fetchProductsAsync();
const {products} = this.props;
this.setState({filteredData: products || []});
}
componentDidUpdate() {
console.log(this.state.filteredData);
}
filterData = (value) => {
const {products} = this.props;
const filData = products.filter((prod) => {
return prod.name.includes(value);
});
// console.log(filData);
this.setState({filteredData: filData});
};
handleSearch = (value) => {
const {products} = this.props;
if (value) {
// this.setState({value});
this.filterData(value);
// console.log('yes');
} else {
console.log('empty');
this.setState({filteredData: products});
this.forceUpdate();
}
};
handleChange = (value) => {
// console.log(value);
this.setState({value});
};
render() {
const {others} = this.props;
// console.log(this.state.filteredData);
const options = this.state.filteredData.map((item, index) => {
console.log(item);
return (
<Option value={item.value || item[others.key] || item}>
{others.customTitle ? (
<text style={{fontSize: 13, fontWeight: 'bold'}}>{item[others.customTitle]}</text>
) : (
item.label || item[others.key] || item
)}
{others.dataKeys ? (
<div className="row" style={{flexWrap: 'wrap'}}>
{others.dataKeys.map((i) => (
<text style={{fontSize: 11, marginLeft: 5, marginRight: 5}}>{item[i]}</text>
))}
</div>
) : null}
</Option>
);
});
return (
<Select
showSearch
onSearch={this.handleSearch}
// placeholder="Select"
// key={this.state.filteredData.length}
value={this.state.value}
onChange={this.handleChange}>
{options}
</Select>
);
}
}
const mapStateToProps = (state) => {
return {products: state.data.products || []};
};
export default connect(mapStateToProps, {fetchProductsAsync})(SelectOptions);
Try setting this prop on the Select component filterOption={false}
这篇关于Antd 选择搜索框不呈现匹配项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!