React中依赖socket的useEffect首次重渲染时无法获取更新后状态的原因咨询

嘿，我来帮你拆解下这个问题的根源，以及对应的解决办法！

首先咱们先对齐下你的问题场景：第一个useEffect（空依赖数组）成功从API拉取数据并更新了items状态，FlatList也正常渲染出了所有初始项。但当socket第一次推送itemAdded事件时，handleItemAdded里的items居然还是初始的空值，导致调用setItems([newItem, ...items])后，列表只剩下这个新项；而后续再推送新项时就正常了，因为此时useEffect#2已经能捕获到更新后的items状态。

核心问题：闭包陷阱 #

你的第二个useEffect依赖数组只有socket，这意味着它只会在组件初始渲染时执行一次，里面定义的handleItemAdded函数会牢牢捕获组件初始渲染时的items状态（也就是你初始设置的undefined）。哪怕第一个useEffect已经更新了items，这个handleItemAdded里的items还是停留在初始值——因为它的闭包环境没有随着状态更新而更新。

两种靠谱的解决方案 #

方案1：使用函数式更新（最推荐）

React的setState支持传入一个函数，这个函数会自动接收当前最新的状态值作为参数，完全绕开闭包的问题，不需要依赖外部的items变量：

// 建议初始化空数组，避免undefined引发的展开报错
const [items, setItems] = useState([])

useEffect(() => {
  (async () => {
    try {
      const response = await axios.get(`${getItemsUrl}`)
      setItems(response.data)
    } catch (err) {
      console.log(err.response.data)
    }
  })()
}, [])

useEffect(() => {
  function handleItemAdded(newItem) {
    // prevItems是React传入的当前最新状态，不受闭包影响
    setItems(prevItems => [newItem, ...prevItems])
  }

  socket.on('itemAdded', handleItemAdded)
  return () => {
    socket.off('itemAdded', handleItemAdded)
  }
}, [socket])

这种方案既高效又简洁，不需要修改useEffect的依赖数组，是处理这类状态更新问题的标准做法。

方案2：把items加入useEffect的依赖数组

这个方法也能解决问题，但需要注意监听的清理逻辑——因为每次items变化时，useEffect都会重新执行，我们需要先移除旧的监听，再绑定新的：

const [items, setItems] = useState([])

useEffect(() => {
  (async () => {
    try {
      const response = await axios.get(`${getItemsUrl}`)
      setItems(response.data)
    } catch (err) {
      console.log(err.response.data)
    }
  })()
}, [])

useEffect(() => {
  function handleItemAdded(newItem) {
    setItems([newItem, ...items])
  }

  socket.on('itemAdded', handleItemAdded)
  return () => {
    socket.off('itemAdded', handleItemAdded)
  }
}, [socket, items]) // 将items加入依赖数组

不过这个方案的缺点是，每次items更新都会重新绑定监听，虽然socket.off能清理旧的监听，但相比第一种方案，函数式更新的性能和简洁性都更优。

备注：内容来源于stack exchange，提问作者mahomed-dev