reactHook useState更新复杂数组，state更新了，但在函数内部state却不一致？

Question

代码如下：

 const [curLayouts, setCurLayouts] = useState([]);
 const oldLayouts = useRef(null);

正常操作

在调用一次接口后，我重新setstate了

oldLayouts.current=deepClone(initLayout)
setCurLayouts(initLayout);

接口数据如下：

const initLayout=[
    {
        "index": 0,
        "position": "left_1",
        "chartId": "",
        "detail": {}
    },
    {
        "index": 1,
        "position": "left_2",
        "chartId": "base_info",
        "detail": {}
    },
    {
        "index": 8,
        "position": "bottom_1",
        "chartId": "monitor",
        "detail": {
            "camera_id": "14",
            "camera_name": "dahua5"
        }
    }
]

之后经过正常操作修改了curLayouts，重新渲染，一切正常。

数据异常

接着我进行了如下操作之后就变异了！

setCurLayouts(oldLayouts.current)

此时在函数组件内打印出来的curLayouts是最新的，也就是上面设置的oldLayouts.current

之后我去调用了函数组件内容的方法，里面打印的curLayouts却和我上面打印的不一致！经过对比发现，这里打印的数据是我执行setCurLayouts(oldLayouts.current)之前的数据

  const handleChangePosition = () => {
      console.log('handleChangePosition',curLayouts)

   };

没有头绪...是否有大佬略知一二？

Answer 1

在React中，useState hook不会自动合并更新对象，所以需要手动合并。你可以使用函数更新器结合对象展开语法来实现这一点。下面是一个示例：

const [curLayouts, setCurLayouts] = useState([]);
const oldLayouts = useRef(null);

// 正常操作
// 在调用一次接口后，我重新setstate了
oldLayouts.current=deepClone(initLayout)
setCurLayouts(initLayout);

// 数据异常
// 接着我进行了如下操作之后就变异了！
setCurLayouts(oldLayouts.current)

// 这里打印的数据是我执行setCurLayouts(oldLayouts.current)之前的数据
const handleChangePosition = () => {
  console.log('handleChangePosition',curLayouts)
};