时间戳

首页 > 解决方案 > 如何改善 ReactJS 中的设置状态？

javascript - 如何改善 ReactJS 中的设置状态？

问题描述

我得到了一些设置为状态的信息抛出 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))
        }))
    }
}

我所做的事情有效，但我觉得这不是最好的方法。我想我只需要使用国家状态而不是 allCountries 来过滤国家。

标签： javascriptreactjsstate

解决方案

我会建议这样的方式

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

如果没有输入 - 只需将 countriesFiltered 设置为国家。

如果输入了任何内容 - 然后将过滤后的记录分配给 countryFiltered。

如果新词包含前一个则不需要过滤国家，您可以过滤国家过滤

就是这样。

推荐阅读