如何改进 ReactJS 中的设置 state？

Question

I'm getting some info throw API which is set in state. These info must be filtered depending on what I type in the input. When i filter this array state and delete a letter from input I can not return my state to the previous value but if I type one more letter not the whole array is filtered.

I've tried to introduce a class property where all initial info is present and then to set state depending on filtered property.

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))
        }))
    }
}

The thing I did works but I feel it's not the best approach. I think I need to use only countries state not the allCountries to filter countries.

Answer 1

I would suggest such a way

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

if nothing is typed - just set countriesFiltered equal to country.

If anything is typed - then assign filtered records to countriesFiltered.

If new word includes the previous then no need to filter countries, you can filter countriesFiltered

And that is it.