我已經(jīng)為此苦苦掙扎了太久了。我有一個(gè) Node 服務(wù)器,帶有 websockets 向 React 客戶端發(fā)送消息和從 React 客戶端接收消息。但出于某種原因,每當(dāng)從 Node 發(fā)送 websocket 消息時(shí),它都會(huì)導(dǎo)致所有 React 客戶端刷新其頂級(jí)組件。因此,如果有人在客戶端處理某事,就會(huì)把他們搞得一團(tuán)糟。我什至不知道如何判斷這是我的 Node 代碼還是 React 代碼或兩者的問題。React 代碼非常龐大,如果不是必須的話,我不想深入下去。所以我將從我的節(jié)點(diǎn)服務(wù)器發(fā)布 websocket 代碼,希望有人能在那里找到一些東西。如果您也需要查看一些 React 代碼,可以告訴我。但我希望這只是一個(gè) Node WS 問題。我的 React 中確實(shí)有代碼“接收”Node 消息并適當(dāng)?shù)靥幚硭鼈?,但我注釋掉了該代碼并且我仍然遇到刷新問題。對(duì)此的任何幫助將不勝感激!更新:在評(píng)論中 Daniele 的幫助下,我發(fā)現(xiàn)實(shí)際上是客戶端代碼接收了導(dǎo)致刷新的消息。注釋掉該代碼后,沒有刷新發(fā)生。這是我的頂級(jí)組件中直接從 app.js 加載的代碼: const ws = useGlobalWebSocketContext(); const numberClients = parseInt( useGlobalWSDataContext().numberClients, 10 ); const numberIpads = parseInt( useGlobalWSDataContext().numberIpads, 10 ); console.log('SchedulePage numberIpads: ' + numberIpads);實(shí)際上,我刪除了除第一行以外的所有內(nèi)容,但刷新仍然發(fā)生了!所以我想你們可能都想看看網(wǎng)絡(luò)套接字上下文文件。import React, { createContext, useContext } from 'react';import PropTypes from 'prop-types';import useWebSocketLite from '../components/home/webSocketHook';const GlobalWebSocketContext = createContext();export const useGlobalWebSocketContext = () => useContext(GlobalWebSocketContext);// websocket stuffconst wsURL = process.env.NODE_ENV === 'development' ? 'ws://localhost' : 'ws://production.app.local';const GlobalWebSocketContextProvider = (props) => { const websocket = useWebSocketLite({ socketUrl: wsURL + ':' + process.env.REACT_APP_WS_PORT }); return ( <GlobalWebSocketContext.Provider value={websocket}> {props.children} </GlobalWebSocketContext.Provider> );};
無論何時(shí)從 Node WS 服務(wù)器發(fā)送消息,它都會(huì)導(dǎo)致所有 React 客戶端刷新
蕭十郎
2023-01-06 16:24:55