React JS中如何使用useEffect正确合并多数组并更新状态值

报错原因与解决方法 #

1. allData.push 提示不是函数的问题

React 状态默认不可变，你定义的allData如果是通过useState声明的状态变量，它本身是只读的，不能直接调用数组的push方法修改，必须通过配套的set方法传入新数组完成更新。

2. 之前出现无限循环的问题

如果你的useEffect依赖数组里包含allItems，那么在effect内调用setAllItems会更新allItems的值，触发依赖变动导致effect反复执行，就会出现无限循环。你现在把依赖换成三个LibrosID变量后，只要这三个变量不重复更新就不会触发循环，这也是你修复后循环消失的原因。

3. 打印allItems拿到旧值的问题

React 的状态更新是批量异步的，调用setAllItems后，当前函数作用域内的allItems还是本次渲染时捕获的旧值，要等组件完成下一次重渲染后，allItems才会变成最新值。你在setAllItems之后直接打印的时机早于重渲染，所以永远拿到的是上一次的状态，这是React的正常运行机制，不是bug。

解决方案

你可以直接使用即将传入state的新值做后续操作，不需要等待state更新：

useEffect(() => {
  const newAllItems = [LibrosID1, LibrosID2, LibrosID3]
  setAllItems(newAllItems)
  // 直接操作newAllItems即可
  console.log(newAllItems)
}, [LibrosID1, LibrosID2, LibrosID3])

如果需要在allItems更新完成后执行逻辑，可以单独新增一个监听allItems的effect：

// 负责更新allItems
useEffect(() => {
  setAllItems([LibrosID1, LibrosID2, LibrosID3])
}, [LibrosID1, LibrosID2, LibrosID3])

// 负责监听allItems变化后执行逻辑
useEffect(() => {
  console.log(allItems) // 此处获取的是最新值
}, [allItems])

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