React中调用setState后localStorage更新滞后、数据不同步如何解决？

React 中 useState 返回的更新函数 setState 是异步批量执行的，调用 setState 后不会立即修改当前作用域下的 state 变量，而是会将状态更新请求加入队列，等当前同步代码执行完毕后才会触发重渲染、分配新的 state 值。
你代码中在调用 setState 后立刻读取 state.externalEvents 取到的还是更新前的旧值，所以存入 localStorage 的永远是上一版本的状态。

以下是两种常用的可直接落地的修复方案：

方案1：直接使用新构造的数组存储到 localStorage #

在更新前先把新的 externalEvents 数组构造好，同时传给 setState 和 localStorage 的存储逻辑，避免读取旧 state。

const addTodo = (e) => {
    e.preventDefault();
    if (title === "" || color === "") {
      alert("please type what to do or choose a color");
    } else {
      // 先构造新的数组
      const newExternalEvents = [
        ...state.externalEvents,
        { title: title, color: color, custom: custom, id: uuidv4() }
      ]
      setState({
        externalEvents: newExternalEvents
      });
      // 直接用新构造的数组存储，不用读取当前作用域的旧state
      localStorage.setItem('externalEvents',JSON.stringify(newExternalEvents))
      setTitle("");
      setCustom("");
    }
  };

方案2：通过 useEffect 监听状态变化自动同步 #

如果项目中有多处逻辑会修改 externalEvents，建议用 useEffect 监听该状态的变化，一旦变化就自动同步到 localStorage，不需要每次修改状态后手动写存储逻辑，避免遗漏。

// 新增useEffect监听
useEffect(() => {
  localStorage.setItem('externalEvents', JSON.stringify(state.externalEvents))
}, [state.externalEvents])

const addTodo = (e) => {
    e.preventDefault();
    if (title === "" || color === "") {
      alert("please type what to do or choose a color");
    } else {
      setState({
        externalEvents: [
          ...state.externalEvents,
          { title: title, color: color, custom: custom, id: uuidv4() },
        ],
      });
      setTitle("");
      setCustom("");
    }
  };

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