React实现宝可梦列表搜索框实时筛选功能问题求助

问题排查 #

你编写的filterPokemon筛选方法没有被触发执行，仅更新了searchValue状态，没有执行后续的列表筛选逻辑，因此页面列表不会跟随输入变化。
你用来存储全量原始数据的pokeTemp变量逻辑设计正确，不需要调整。

修复方案 #

方案一：输入变化时直接调用筛选 #

修改handleInputChange方法，更新搜索值后直接触发筛选：

handleInputChange = (event) => {
  const value = event.target.value;
  this.setState({ searchValue: value });
  // 新增调用筛选逻辑
  this.filterPokemon(value);
};

方案二：通过生命周期监听搜索值变化自动触发 #

如果需要把状态更新和筛选逻辑解耦，可新增componentDidUpdate生命周期方法监听搜索值变化：

componentDidUpdate(prevProps, prevState) {
  // 仅搜索值发生变化时才执行筛选，减少不必要的性能消耗
  if (prevState.searchValue !== this.state.searchValue) {
    this.filterPokemon(this.state.searchValue);
  }
}

优化建议 #

由于React的setState是异步执行的，如果需要依赖最新更新的searchValue执行筛选，建议把筛选逻辑放到setState的回调函数中，避免读取到旧状态的问题：

handleInputChange = (event) => {
  const value = event.target.value;
  this.setState({ searchValue: value }, () => {
    this.filterPokemon(this.state.searchValue);
  });
};

内容的提问来源于stack exchange，提问作者Drew