NodeJS React setState默认值类型

z4bn682m  于 2023-04-20  发布在  Node.js
关注(0)|答案(1)|浏览(121)

我是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不能改变它?

kmynzznz

kmynzznz1#

useEffect在**组件以异步方式渲染后运行。因此,在第一次渲染中,users变量为undefined,因此调用map方法失败。该代码与执行以下操作相同:

let users;

window.setTimeout(() => {
  users = [];
}, 0);

return users.map(() => {});

由于setTimeout(useEffect)将在map函数调用之后执行,因此将出现完全相同的错误。

相关问题