我是React的新手,但我很难找到我写的东西中的错误。
目标是显示一个用户列表,通过socket.io
向服务器请求。我的原始代码如下:
// the list of users
const [users, setUsers] = useState()
useEffect(() => {
if (socket == null) return
// listen once to the get user event
socket.once('load-users', userList => {
console.log('received type', typeof(userList), ':', userList)
setUsers(userList)
})
console.log('emitting get users')
// ask the server for the users
socket.emit('get-users', {all: true})
}, [socket, users])
在渲染组件时,我想返回一个简单的列表:
return (
<ul>
{users.map((user) => <li key={user.name}>{user.name} | {user.password}</li>)}
</ul>
)
这在浏览器中给了我一个不祥的错误:
Compiled with problems:
×
ERROR
undefined is not a function (near '...users.map...')
Dashboard@http://localhost:3000/static/js/bundle.js:184:24
...
经过几个小时的挣扎,我试图初始化状态为数组
const [users, setUsers] = useState([])
你瞧,它起作用了!真实的的问题是我不知道为什么。
为什么状态的初始类型如此重要?为什么setState
不能改变它?
1条答案
按热度按时间kmynzznz1#
useEffect
在**组件以异步方式渲染后运行。因此,在第一次渲染中,users
变量为undefined
,因此调用map
方法失败。该代码与执行以下操作相同:由于setTimeout(useEffect)将在
map
函数调用之后执行,因此将出现完全相同的错误。