React useState初始值类型疑问：未初始化为何引发map调用报错？

问题根源 #

你遇到的报错核心是组件第一次渲染时状态值的类型不匹配，和setState能不能改变状态无关——setState确实能更新状态，但它赶不上第一次渲染的时机。

具体原因拆解 #

• 第一次渲染的初始状态：当你调用useState()不传入任何参数时，React会把状态的初始值设为undefined。组件挂载后会立刻执行第一次渲染，这时候你的socket.io请求还在异步处理中（还没拿到用户列表），渲染时使用的是初始的undefined。undefined不是数组，自然没有map方法，浏览器就会抛出你看到的错误。

• setState的异步特性：setUsers确实能把状态更新为用户数组，但它是异步执行的，且只有当socket.io成功接收到服务器返回的用户列表后才会触发。在这之前，组件已经完成了第一次渲染，错误已经发生，后续的状态更新无法挽回这次报错。

• 空数组初始值的作用：把初始值设为useState([])后，第一次渲染时users是一个空数组。空数组是合法的数组类型，拥有map方法（调用后返回空数组，不会触发报错）。等到socket.io拿到数据并调用setUsers后，状态更新为真实的用户数组，组件重新渲染，就能正确渲染出用户列表了。

额外提醒 #

React状态的类型最好保持前后一致——初始值和后续setState更新的值应该是同一种类型（比如这里始终是数组）。这样能避免很多类型相关的渲染错误，让组件逻辑更稳定。

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