React中调用saveColors函数需两次才存入localStorage的原因及解决方法

问题现象 #

调用saveColors函数时，首次仅能保存旧的数组状态，再次调用才能成功保存包含新数据的数组。相关代码如下：

const [savedColors, setSavedColors] = React.useState(JSON.parse(localStorage.getItem('colors')) || [] );

function saveColors(){
  setSavedColors(prevSavedColors => (
    [
      ...prevSavedColors,
      data.colors
    ]
  ))
  localStorage.setItem("colors", JSON.stringify(savedColors));
}

原因分析 #

• React的useState状态更新是异步批量执行的，调用setSavedColors后，当前函数执行上下文中的savedColors并不会立刻更新为新值，仍然是更新前的旧状态。
• 第一次调用saveColors时，localStorage.setItem使用的是旧的savedColors值，新状态要等组件重新渲染后才会生效；第二次调用时，savedColors已经是上一次更新后的结果，此时才能正确保存包含新数据的数组。

解决方法 #

方法一：直接计算新状态并同步更新 #

先计算出要更新的新状态，同时更新useState和localStorage，确保两者使用的是同一个新值：

function saveColors(){
  const newSavedColors = [...savedColors, data.colors];
  setSavedColors(newSavedColors);
  localStorage.setItem("colors", JSON.stringify(newSavedColors));
}

如果担心savedColors不是最新状态（比如存在多次连续调用的场景），可以用函数式更新的方式，基于最新的prev状态计算新值并保存：

function saveColors(){
  setSavedColors(prevSavedColors => {
    const newSavedColors = [...prevSavedColors, data.colors];
    localStorage.setItem("colors", JSON.stringify(newSavedColors));
    return newSavedColors;
  });
}

方法二：用useEffect监听状态变化自动同步 #

通过useEffect监听savedColors的变化，一旦状态更新就自动同步到localStorage，逻辑更解耦：

const [savedColors, setSavedColors] = React.useState(JSON.parse(localStorage.getItem('colors')) || [] );

// 状态变化时自动同步到localStorage
React.useEffect(() => {
  localStorage.setItem("colors", JSON.stringify(savedColors));
}, [savedColors]);

function saveColors(){
  setSavedColors(prevSavedColors => [...prevSavedColors, data.colors]);
}

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