React Search Фильтр объектов не фильтруется

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 () создает новый массив со всеми элементами, которые проходят тест, реализованный предоставленной функцией.