为什么React SetState钩子中的previous state为undefined？

问题修复说明 #

1. 首要问题：代码语法缺失 #

你提供的代码存在括号未闭合的语法错误，会直接导致运行时上下文异常，这是setUsers更新函数中prev为undefined的最常见诱因：

• 缺失ref.on监听回调的闭合花括号
• 缺失for in循环的闭合花括号

修复后的基础可运行代码如下：

const [users, setUsers] = useState([]);

useEffect(() => {
  console.log(users) // 此处打印空数组符合初始状态预期
  for (let x in array) {
    const ref = firebase.database().ref(`/users/${array[x]}`);
    ref.on('value', snapshot => {
      const data = snapshot.val();
      setUsers((prev) => [...prev, data])
    }) // 补全监听回调闭合括号
  } // 补全for循环闭合括号
}, [])

2. 次因排查：其他位置的状态修改 #

如果修复语法后问题仍然存在，请检查代码其他位置是否存在setUsers()无参数调用的情况：无参数调用setUsers会直接将users状态设置为undefined，后续调用更新函数时拿到的prev参数自然为undefined。

3. 可选优化项 #

当前实现还存在两个可优化点，避免后续出现内存泄漏、数据重复等问题：

• Firebase的ref.on是持续性事件监听，组件卸载时没有取消监听会触发内存泄漏，建议在useEffect中返回清理函数取消所有监听
• 多次异步触发setUsers更新容易出现数据重复问题，建议将所有用户查询结果聚合完成后再一次性更新状态

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