如何使用 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])
})