React中useState值滞后，发送PUT请求携带旧值如何解决？

问题出在React的useState更新是异步的——你在onChange里调用setSizeValue(e.target.value)后，sizeValue并不会立刻变成新值，此时调用updateClothesSize传的还是更新前的旧数据。

给你两种直接有效的解决方式：

方式一：直接使用事件目标的最新值 #

不需要依赖state的更新，直接把e.target.value传给接口调用函数，这样就能确保发送的是刚选中的新值：

<select
   name="size"
   className="sizeSelector"
   value={sizeValue}
   onChange={e => {
      const newSize = e.target.value;
      setSizeValue(newSize);
      updateClothesSize(basketItem.id, newSize);
   }}
>
  <option value="s">s</option>
  <option value="m">m</option>
  <option value="l">l</option>
  <option value="xl">xl</option>
  <option value="xxl">xxl</option>
</select>

方式二：用useEffect监听state变化 #

如果你的业务逻辑需要依赖sizeValue的最新状态才能执行接口调用，可以用useEffect监听sizeValue的变化，当它更新后再触发请求：

import { useState, useEffect } from 'react';

const [sizeValue, setSizeValue] = useState(basketItem.clotheSize);

useEffect(() => {
  // 排除初始加载时的默认值，避免不必要的请求
  if (sizeValue !== basketItem.clotheSize) {
    updateClothesSize(basketItem.id, sizeValue);
  }
}, [sizeValue, basketItem.id]); // 依赖项数组确保state变化时触发

// onChange只负责更新state
<select
   name="size"
   className="sizeSelector"
   value={sizeValue}
   onChange={e => setSizeValue(e.target.value)}
>
  <option value="s">s</option>
  <option value="m">m</option>
  <option value="l">l</option>
  <option value="xl">xl</option>
  <option value="xxl">xxl</option>
</select>

两种方式选哪个？如果只是单纯发送新选中的值，方式一更简洁；如果后续还有其他依赖sizeValue的操作，方式二更合适。

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