如何使用 socket.io-client 在 useEffect 挂钩中更新 React state

Question

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

我的服务器只会发出最新信息，例如第 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>
        }
    )
}

Answer 1

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

useEffect中缺少依赖项。

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

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

您正确 state 您不希望它作为依赖项。 要么忽略特定行的规则，要么如果您觉得您了解 deps 的工作原理，请在您的 eslint rc 文件中完全关闭该规则。

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

State 突变

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

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

Answer 2

见这里https://www.npmjs.com/package/use-socket.io-client

UseSocket 钩子进行反应

Answer 3

您需要使用setFetchedData更新fetchedData

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