时间戳

首页 > 解决方案 > 如何使用 socket.io-client 更新 useEffect 挂钩中的 React 状态

javascript - 如何使用 socket.io-client 更新 useEffect 挂钩中的 React 状态

问题描述

我是 React 的新手，在我的项目中使用 Typescript React。我正在尝试使用Socket.IO-client连接到我的 Socket.IO 烧瓶服务器。

我的服务器只会发出最新信息，例如第 1 次发出：第 1 项，第 2 次发出：第 2 项...

我的 React UI 会显示以前和最新信息的详细信息。我已将数据获取的代码放在 useEffect 挂钩中。然而，这表明

React Hook useEffect 缺少依赖项：'fetchedData'。>包含它或删除依赖项数组。如果您在 >'setFetchedData' 调用 react-hooks/exhaustive-deps 中只需要 'fetchedData'，也可以执行功能性 >update 'setFetchedData(f => ...)'

我不认为我可以将 fetchedData 放在依赖数组中，因为 fetchedData 会不断更新，这会导致无限循环。有什么办法可以做到吗？非常感谢您的帮助。

const MyPage = () => {
    const [fetchedData, setFetchedData] =  useState<string[]>([]);
    useEffect(() => {
        socket.emit('get_list', { user : 'userId');

        socket.on('response', (list:any) => {
            fetchedData.push(list.data)
            setFetchedData([...fetchedData])
        })
    }, [])

    return(
        {
            fetchedData.map(value, index) => <div key={index}>{value}</div>
        }
    )
}

标签： javascriptreactjstypescriptflask-socketio

解决方案

因此，我将尝试解决您面临的两个问题。

中缺少依赖项useEffect。

这是由eslint-plugin-react-hooks包中的 eslint 规则引起的，它默认包含在 Create react app 中。

有问题的规则是，由于您在上面看到的原因react-hooks/exhaustive-deps，它通常会进入我的.eslint.rc设置。off大多数情况下，添加所有依赖项是非常安全的，尽管我通常会发现列表的增长不成比例，我真的只想查看useEffect真正关心的依赖项列表已更改。

您正确地声明您不希望它作为依赖项。要么忽略特定行的规则，要么如果你觉得你理解了 deps 是如何工作的，那么在你的 eslint rc 文件中完全关闭规则。

或者，您可以确保您的钩子依赖项声明时没有错误。这将要求您将调用的回调抽象到具有自己依赖关系socket.on的自己的挂钩中。useCallback我不会提供更多关于此的信息，因为如果您愿意，可以尝试一下，如果遇到问题，请再问一个问题。

状态突变

正如其他人所提到的，您需要小心不要改变您的状态。您不会有类型错误，因为您没有将状态类型定义为只读。尝试改变：

<string[]>useState(...)到<readonly string[]>useState(...)，你会看到你直接在你的状态上调用变异函数。

推荐阅读