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

Question

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

我的服务器只会发出最新信息，例如第一个发射：项目1，第二个发射：项目2 ...

并且我的React UI将显示以前和最新信息的详细信息。我已经将数据获取代码放在useEffect挂钩中。但是，它表明

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

我不认为我可以将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软件包中的eslint规则引起的，默认情况下它包含在Create react app中。

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

您正确地声明您不希望将其作为依赖项。请忽略该特定行的规则，或者如果您认为自己了解deps的工作原理，请在eslint rc文件中关闭该规则。

状态突变

正如其他人所提到的，您需要注意不要改变您的状态。您不会将状态类型定义为只读，因此不会出现类型错误。尝试更改：

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

Answer 2

您需要使用fetchedData更新setFetchedData

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

Answer 3

请参阅此处https://www.npmjs.com/package/use-socket.io-client

UseSocket挂钩进行反应