React Select标签onChange事件更新State滞后问题

React 状态更新是异步批处理机制，同一同步执行的事件回调里，调用setState后不会立刻修改当前函数闭包内引用的状态值。你在handleHueChange里调用setHueColor(newHue)之后，紧接着读取的hueColor还是上一轮渲染留下的旧值，传给randomColor的参数自然是旧的色调，最终表现就是颜色更新永远慢一次操作。
你在回调里写console.log(color, hueColor, lum)打印出来的也是旧值，这是React闭包的正常表现，不是框架bug。

两种方案选一种即可：

• 直接用回调里拿到的最新临时值计算颜色，不依赖闭包内的旧状态

const handleHueChange = (e) => {
  const newHue = e.target.value;
  setHueColor(newHue);
  // 直接传入刚拿到的newHue，不要用状态里的旧hueColor
  setColor(randomColor({ hue: newHue, luminosity: lum }));
};

• 用useEffect监听关联状态变化，自动触发派生状态更新

const handleHueChange = (e) => {
  // 只负责更新基础的色调状态
  setHueColor(e.target.value);
};

// 当色调、亮度任意一个变化时，自动重新计算生成颜色
useEffect(() => {
  setColor(randomColor({ hue: hueColor, luminosity: lum }));
}, [hueColor, lum]);

你写的Select组件还有两个小bug会导致选中态异常：

1. value绑定错误：你setHueColor存的是字符串值，却绑定了hueColor.value，实际拿到的是undefined，会导致选择器无法正确显示当前选中项
2. Option未显式声明value：虽然默认会取文本内容，但显式绑定value可以避免非预期的取值问题

修正后的选择器代码：

<form>
  <select
    name="hue"
    value={hueColor}
    onChange={handleHueChange}
  >
    {hue.map((hueItem, idx) => (
      <option key={idx} value={hueItem}>{hueItem}</option>
    ))}
  </select>
</form>

提示：如果要查看最新的状态值，不要在setState的同个同步回调里打印，要么打印你自己拿到的临时变量（比如上面的newHue），要么在useEffect里监听对应状态变化后再打印。

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