Question

我正在尝试使用用户输入的字符串来过滤数组。用第一个键输入无法正确更新结果，然后，如果清除此框或删除/更改了字符，则不会显示可能通过过滤器的结果。

目标是将所有结果显示在初始页面上，然后在每次击键时正确更新。

道歉；我只是在学习编码。感谢您的协助。

searchCompUsers = () => {
    const newState = {}
            const filteredEmps = this.props.employees.filter(
                user => user.name.includes(this.state.searchName)
            )
            console.log(filteredEmps)
   ``         newState.filterEmps = filteredEmps
            this.setState(newState)
}

empSearch = evt => {
    const stateToChange = {};
    stateToChange[evt.target.id] = evt.target.value;
    this.setState(stateToChange);
    this.searchCompUsers()
};

Answer 1

这些行按顺序运行：

this.setState(stateToChange);
this.searchCompUsers();

...
const filteredEmps = this.props.employees.filter(
    user => user.name.includes(this.state.searchName)
)
...
this.setState(newState);

在您的示例中，我假设evt.target.id是searchName。

您在这里不应该做的两件事：

依次运行两个setState。这不一定是问题，但是通常没有理由，这可能意味着您的代码结构不良。
在setState之后立即引用状态。 setState是异步运行的，因此您不能保证在到达过滤器时状态会被更新。

您得到的怪异结果可能源于（2）。

假设其余代码都可以，这样的事情会更好：

empSearch = evt => {
    const key = evt.target.id;
    const value = evt.target.value;
    if (key === "searchName") {
       const filteredEmps = this.props.employees.filter(
           user => user.name.includes(value);
       );
       this.setState({
           filterEmps: filteredEmps
       });
    }
};

通过这种方式，您每个事件只调用一次setState，而不必依赖早先的setState的结果。

如果出于某种原因（例如使用受控组件）需要将searchName保持在状态，则只需将其添加到相同的setState中即可。

   this.setState({
       filterEmps: filteredEmps,
       searchName: value
   });

您可以假设状态为最新的唯一地方是render()函数和某些React生命周期函数。您也可以根据需要提供对setState的回调，尽管这种回调相对较少：this.setState({ ...someState }, () => { ...someCodeToRun() });

寻找帮助以从.filter（）获得正确的结果

1 个答案: