React state中存储的数组更新异常，下拉筛选数组未按预期更新是什么原因？

安全阿岳

2026-10-4

问题根因

React的状态更新是异步的，在onChange回调中执行setlocation后立刻调用filterLocations，此时函数内部读取的location还是更新前的旧值，拿不到最新的输入内容。
筛选逻辑存在漏洞：遍历allLocations的过程中，只要遇到一个不匹配的元素就直接清空dropDownLocations，会把之前已经匹配到的结果全部清除；同时循环内多次调用setdropDownLocations，由于状态更新的批量合并特性，每次读取的dropDownLocations都是遍历开始前的旧值，无法正确累加匹配结果。
没有在每次筛选前清理上一次的匹配结果，会导致多次输入的结果混乱叠加。

修正后代码

import "./App.css";
import { useState, useEffect } from "react";

function App() {
  // 用户输入的位置
  const [location, setLocation] = useState("");
  const [allLocations, setAllLocations] = useState(["F-1", "F-2", "G-1", "G-2"]);
  const [dropDownLocations, setDropDownLocations] = useState([]);

  // 监听location变化，自动触发筛选
  useEffect(() => {
    // 直接用filter方法一次性筛选所有符合条件的元素
    const matchedLocations = allLocations.filter(item => item.includes(location));
    setDropDownLocations(matchedLocations);
  }, [location, allLocations]);

  return (
    <div className="App">
      <div>
        <input
          value={location}
          onChange={(e) => setLocation(e.target.value)}
        />
        <ul>
          {dropDownLocations.map((i) => (
            <li key={i}>{i}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;