React下拉框onChange事件获取到state上一次旧值的问题

架构老林

2026-8-26

问题原因

你踩了React状态更新最常见的坑：setState是异步批处理的，在同一个事件回调里调用setItemName之后，立刻读取itemName拿到的永远是更新前的旧值，要等回调执行完、组件重渲染后状态才会变成新值，这就是你每次选值都慢一拍的核心原因。
你的autofillItemDetails函数虽然定义了itms、itmName两个入参，但函数内部实际用的是外层作用域的items和itemName，传参完全没生效，进一步导致匹配逻辑拿到的都是旧状态。
Firebase拉取数据的逻辑有冗余：在forEach循环里反复调用setItems，每次传入的都是没拼接完的不完整数组，会触发无意义的重渲染。
下拉框的<option>没写value属性，默认取文本节点内容作为选中值，属于不规范写法，后续修改商品展示文案很容易出匹配bug。

修复步骤

事件回调里不要等状态更新完再拿值，直接从e.target.value取最新选中的商品名，传入自动填充逻辑，绕开状态异步的问题
修正自动填充函数的变量引用，统一使用传入的参数做匹配，不要混用外层状态
把Firebase拉取后的setItems挪到循环外面，等所有商品数据拼接完成再一次性更新状态
给<option>标签补上value属性，和选中逻辑严格对齐
可选优化：商品列表加载完成后，默认选中第一个商品并自动填充对应编码、单价，避免硬编码的初始值和Firebase实际数据不一致

修复后的完整核心代码：

const [items, setItems] = useState([]);
const [itemName, setItemName] = useState("");
const [itemUnitPrice, setItemUnitPrice] = useState(0);
const [itemCode, setItemCode] = useState(null);

// 自动填充逻辑，直接依赖传入参数，不绑定外层状态
function autofillItemDetails(allItems, targetFruitName) {
  if (!allItems.length || !targetFruitName) return;
  const matched = allItems.find(item => item.fruitname === targetFruitName);
  if (matched) {
    setItemUnitPrice(matched.price);
    setItemCode(matched.code);
  }
}

const handleItemNameChange = (e) => {
  const selectedName = e.target.value;
  setItemName(selectedName);
  // 直接用刚拿到的最新选中值匹配，不读取旧的itemName状态
  autofillItemDetails(items, selectedName);
}

useEffect(() => {
  getDocs(colRef)
    .then((snapshot) => {
      // 用map直接生成完整数组，比forEach push更简洁
      const itemsFirebase = snapshot.docs.map(doc => ({
        ...doc.data(),
        id: doc.id
      }));
      // 数组拼接完成后一次性更新状态
      setItems(itemsFirebase);
      // 初始默认选中第一个商品，自动填充对应值
      if (itemsFirebase.length) {
        const firstItem = itemsFirebase[0];
        setItemName(firstItem.fruitname);
        setItemUnitPrice(firstItem.price);
        setItemCode(firstItem.code);
      }
    })
}, [])

return (
  <table width='100%'>
    <thead>
      <tr>
        <td>Item Code</td>
        <td>Item Name</td>
        <td>Unit Price</td>
        <td>Qty</td>
        <td>Total</td>
      </tr>
    </thead>
    <tbody>
      <tr className="h-10">
        <td>{itemCode}</td>
        <td>
          <select onChange={handleItemNameChange} value={itemName}>
            {items.map((item) => (
              <option key={item.id} value={item.fruitname}>
                {item.fruitname}
              </option>
            ))}
          </select>
        </td>
        <td>{itemUnitPrice}</td>
        <td>129</td>
        <td>1032</td>
      </tr>
    </tbody>
  </table>
)

原理解释

React 18之前，事件回调里的所有setState会被合并到一次重渲染里批量执行，回调执行过程中状态变量不会同步更新；React 18之后所有更新默认都是批处理，不管在哪调用setState都不会立刻改变当前作用域的状态值。如果你在同一个回调里setState之后立刻读状态，拿到的永远是当前渲染周期的旧值，自然会出现选值慢一拍的问题。
这种场景下要么直接用事件对象拿到的最新值做后续逻辑，要么把依赖状态变化的逻辑放到useEffect里，监听对应状态变化之后再执行，不要在setState之后立刻读状态。

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