React筛选列表中handleChange内array.length为何滞后于输入？

你遇到的问题根源在于React的useState更新是异步批量处理的——在handleSearchChange里调用setCountriesToShow后，countriesToShow的状态不会立刻更新，所以你用它来判断长度时，拿到的还是上一次的旧值，自然会滞后一步。

解决方法很简单：先计算出筛选后的结果，用这个实时的结果来做判断，而不是依赖还没更新的状态值。修改后的代码如下：

const [countriesToShow, setCountriesToShow] = useState([])
const [newSearch, setSearch] = useState('')
const [showSearched, setShowShearched] = useState(true)
const [notificationMessage, setNotificationMessage] = useState(null)

useEffect(() => {
  console.log(countriesToShow.length)
},[countriesToShow])

const handleSearchChange = (event) => {
  const inputValue = event.target.value.toLowerCase().trim();
  // 先计算筛选后的结果，存到变量里
  const filteredCountries = countries.filter(country =>
    country.name.common.toLowerCase().includes(inputValue)
  );
  
  setCountriesToShow(filteredCountries);
  setSearch(event.target.value);

  if (inputValue.length === 0) {
    setNotificationMessage(null);
    setShowShearched(false);
  } else if (filteredCountries.length <= 10) { // 这里用实时的filteredCountries.length判断
    setNotificationMessage(null);
    setShowShearched(true);
    console.log(filteredCountries.length);
  } else {
    setNotificationMessage('list too long');
    setShowShearched(false);
    console.log(filteredCountries.length);
  }
}

关键改动说明： #

• 先处理输入值并计算出filteredCountries，这个变量存储的就是当前输入对应的最新筛选结果
• 所有需要判断长度的逻辑，都替换为使用filteredCountries.length
• 最后再将filteredCountries传入setCountriesToShow更新状态

这样就能保证判断逻辑用的是实时的筛选结果，不会再出现滞后的问题。

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