对过滤的对象的反应搜索过滤器

Question

我正在尝试创建一个搜索过滤器，它将过滤掉存在于对象数组中的设施名称。如果我将数组硬编码到过滤器工作的状态，但我需要它来从道具中搜索信息。生成过滤后的列表并显示屏幕上的所有名称，但是当我键入文本框时，过滤器没有任何反应。我忽略了什么？

class FacilitySearch extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        search: ""
    };
}

componentDidMount() {
    this.props.dispatch(actions.getFacilitiesList());
}

//The subsr limits the # of characters a user can enter into the seach box
updateSearch = event => {
    this.setState({ search: event.target.value.substr(0, 10) });
};

render() {
    if (!this.props.facilityList) {
        return <div>Loading...</div>
    }

    let filteredList = this.props.facilityList;
    filteredList.filter(facility => {
        return facility.facilityName.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
    });

    return (
        <div>
            <input
                type="text"
                value={this.state.search}
                onChange={this.updateSearch.bind(this)}
                placeholder="Enter Text Here..."
            />
            <ul>
                {filteredList.map(facility => {
                    return <li key={facility.generalIdPk}>{facility.facilityName}</li>;
                })}
            </ul>
        </div>
    );
}
}
const mapStateToProps = state => ({
facilityList: state.facilityList.facilityList
});

export default connect(mapStateToProps)(FacilitySearch)

Answer 1

问题是您没有将过滤器的返回值存储在任何变量中。

你应该做的事情如下：

let filteredList = this.props.facilityList.filter(facility => {
        return facility.facilityName.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
    });

来自MDN：filter（）方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。