Javascript 状态未按预期更新

我使用分类和文本过滤。在每次按文本筛选之前，我要筛选当前选中的重置类别。在这种情况下，当文本更改时，类别不会更新。你知道为什么会这样吗？谢谢

    handleSearchFilter = (searchText: string) => {
    const { selectedOption } = this.props;
    const { currentlyDisplayed } = this.state;

    this.handleSelectFilter(selectedOption);
    const newDisplayed = filter(currentlyDisplayed, (symbol: any) => symbol.name.cs.includes(searchText.toLowerCase()));
    this.setState({ currentlyDisplayed: newDisplayed });
};

handleSelectFilter = (selectedOption: string) => {
    const { symbols } = this.props;

    if (selectedOption === 'all') {
        this.setState({ currentlyDisplayed: symbols });
    } else {
        const newDisplayed = filter(symbols, (symbol: any) => symbol.category.includes(selectedOption.toLowerCase()));
        this.setState({ currentlyDisplayed: newDisplayed });
    }
};

---

我不太了解您的筛选代码，但我很确定您的行为不是预期的，因为您试图在handleSearchFilter方法中修改状态2次：

此.handleSelectFilterselectedOption；//在当前显示时产生更改的

---

最后一行：this.setState{currentlyDisplayed:newDisplayed}； 我建议你看一下医生 基本上，SetState是一种异步方法，因此您不应该依赖它们的值来计算下一个状态。发生的事情正是这样。您第一次调用此选项。handleSelectFilterselectedOption；应在第二个之后执行，并覆盖结果：currentlyDisplayed

---

我希望这能帮助你。如果您能更好地向我解释一下您对过滤和工作流的想法，我可以帮助您修复代码。

我认为您可以通过创建第三个返回新显示的函数来实现您想要的功能，例如：

---

this.setState{currentlyDisplayed:newDisplayed}，=>console.log'state changed'；控制台日志已激发，但状态未更改..@mosses，您在哪里检查更新的日志state@ShubhamKhatri每次键入字符searchText时，它都应重置类别->我应始终按文本筛选所选类别。现在的情况是，每当当前显示的列表通过键入变短时，当字符被删除时，它不会重置其值。@mosses，这种情况的发生是因为您的代码中存在一个错误，其中您没有将原始数据保存到任何地方，而是在先前过滤的基础上进行过滤result@ShubhamKhatri原始数据是symbols道具，它来自redux存储

handleSearchFilter = (searchText: string) => {
    const { selectedOption } = this.props;
    const newDisplayed = this.getNewDisplayed(selectedOption, searchText);
    this.setState({ currentlyDisplayed: newDisplayed });
};

handleSelectFilter = (selectedOption: string) => {
    const newDisplayed = this.getNewDisplayed(selectedOption);
    this.setState({ currentlyDisplayed: newDisplayed });    
};

getNewDisplayed = (selectedOption: string, searchText = '') => {
    const { symbols } = this.props;
    if (selectedOption === 'all') {
        return symbols;
    } else {
        return filter(symbols, (symbol: any) => symbol.category.includes(selectedOption.toLowerCase()) && symbol.name.cs.includes(searchText.toLowerCase()) );
    }
}