React函数式组件数组状态更新时重置问题求助

你遇到的函数式组件数组状态更新异常，核心原因是闭包捕获的旧状态值干扰了更新逻辑，和类组件的状态更新机制差异导致了这个问题。

问题根源 #

先看你的函数式组件代码：

const setColor = (index, hex) => {
  const clonedColors = _.clone(colors);
  clonedColors[index] = hex;
  return clonedColors;
};

这里的colors是组件渲染时闭包捕获的状态值，由于颜色选择器是非受控组件，多次触发更新时，setColor拿到的始终是组件第一次渲染时的初始colors值（['#aaaaaa', '#aaaaaa', '#aaaaaa']）。每次修改都基于这个初始数组操作，自然会覆盖之前的所有变更，只保留当前修改的那一项。

而类组件中this.setState的更新逻辑会自动基于最新的组件状态执行，不会出现闭包捕获旧值的问题，所以更新正常。

修复方案 #

使用useState的函数式更新语法，让每次更新都基于最新的状态值：

export default function EditArtworkFunctional() {
  const [colors, setColors] = useState(initialPalette);
  
  const setColor = (index, hex) => {
    // 传入函数给setColors，React会自动传入最新的状态值prevColors
    setColors(prevColors => {
      // 浅拷贝最新数组（用展开语法或_.clone都可以）
      const clonedColors = [...prevColors];
      clonedColors[index] = hex;
      return clonedColors;
    });
  };
  
  // 其他代码
}

为什么这样有效？ #

当给setColors传递函数时，React会确保这个函数接收的参数是当前组件的最新状态值，彻底避开闭包捕获旧状态的问题。每次更新都是基于最新的数组进行修改，自然不会重置之前的变更。

另外注意：原函数式组件中setColor仅返回新数组，没有主动触发状态更新（即便你在外部调用setColors(setColor(...))，依然会有闭包问题），修复后的代码直接在setColor内部完成更新逻辑，更清晰可靠。

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