Question

我使用按类别和文本进行过滤。在按文本进行每次过滤之前，我要过滤（重置）类别，即当前选中的类别。 当文本更改时，在这种情况下不会更新类别。您知道为什么会发生这种情况吗？谢谢。

++

Answer 1

我认为您可以通过创建第三个返回newDislayed的函数来实现所需的目标，例如：

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

Answer 2

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

this.handleSelectFilter（selectedOption）; //在currentDisplay上产生变化
最后一行：this.setState（{currentDisplayed：newDisplayed}）;

我建议您看一下reactjs文档（https://reactjs.org/docs/state-and-lifecycle.html）基本上，setState是一种异步方法，因此您不应依赖于它们的值来计算下一个状态。恰恰是它隐藏了什么。您的第一个调用（this.handleSelectFilter（selectedOption）;）应该在第二个调用之后执行，并覆盖结果：currentlyDisplayed 希望对您有所帮助。如果您能更好地向我解释过滤和工作流程的想法，那么我可以为您解决代码问题。

状态不会在预期时更新

2 个答案: