Как улучшить настройку состояния в ReactJS?

Question

Я получаю некоторый API броска информации, который установлен в состоянии. Эта информация должна быть отфильтрована в зависимости от того, что я ввожу во ввод. Когда я фильтрую это состояние массива и удаляю букву из ввода, я не могу вернуть свое состояние к предыдущему значению, но если я наберу еще одну букву, не весь массив будет отфильтрован.

Я попытался ввести класссвойство, в котором присутствует вся начальная информация, а затем устанавливается состояние в зависимости от фильтруемого свойства.

js:

state = {
    countries: [],
}

_allCountries = [];

componentDidMount() {
    const { getData } = this.props;
    getData()
        .then(this.onCountryLoaded)
        .catch(this.onError)
}

componentDidUpdate(prevProps) {
    if (prevProps.matchPattern !== this.props.matchPattern) {
        this.setState((_, props) => ({
            countries : this._allCountries.filter(country => country.name.match(props.matchPattern))
        }))
    }
}

То, что я сделал, работает, но я чувствую, что это не таклучший подходЯ думаю, что для фильтрации стран нужно использовать только государство, а не все страны.

Answer 1

Я бы предложил такой способ

state = {
    countries: [],
    countriesFiltered: [];
}

, если ничего не набрано - просто установите countryFiltered равным country.

Если что-то напечатано, - назначьте отфильтрованные записи для countryFiltered.

Если новое слово включает в себя предыдущее, то нет необходимости фильтровать страны, вы можете отфильтровать страны.

И это все.