Obtengo datos del servidor en el componente de nivel superior y cuando obtengo algunos datos específicos, quiero volver a procesar el componente de la aplicación, por lo que tiene estos nuevos datos, que provienen del servidor, pero no puedo pensar en cómo, porque puedo No use fe hooks en el componente de nivel superior. Soy consciente de que podría mover a todos mis oyentes al componente de la aplicación y hacer todas las cosas allí, pero no me gusta que envíe 4 veces más solicitudes desde el servidor, porque se vuelve a procesar en cada estado.
Así que quería preguntar si existe la posibilidad de tener a mis oyentes en el componente de nivel superior y simplemente volver a renderizar los componentes secundarios.
Aquí está mi código de componente de nivel superior
import React from 'react'; import ReactDOM from 'react-dom'; import { GlobalStyle } from './components/global_styles'; import App from './components/App'; const ws = new WebSocket("ws://localhost:3001"); var token = JSON.parse(localStorage.getItem('loginToken') || '{}'); ws.onmessage = ({ data }) => { const parsedData = JSON.parse(data) switch (parsedData.type) { case 'login-success': console.log('logged in'); token = parsedData.user; break; case 'login-fail': console.log(parsedData.error); break; } }; ReactDOM.render( <React.StrictMode> <GlobalStyle /> <App ws={ws} token={token} /> </React.StrictMode>, document.getElementById('root') );Específicamente, estoy hablando de la variable 'token', cada vez que cambia, debe volver a representar el componente de la aplicación.
Si desea que los cambios en el token activen una nueva representación, debe convertirse en una variable de estado.
Un patrón que podría satisfacer sus necesidades es usar un Context que guarde el token y usarlo en el componente de su App .
Me imagino que sería algo así.
const TokenContext = React.createContext() export const TokenProvider = ({children}) => { const [token, setToken] = useState(JSON.parse(localStorage.getItem('loginToken') || '{}')); useEffect(() => { const ws = new WebSocket("ws://localhost:3001"); ws.onmessage = ({ data }) => { const parsedData = JSON.parse(data) switch (parsedData.type) { case 'login-success': console.log('logged in'); setToken(parsedData.user); break; case 'login-fail': console.log(parsedData.error); break; } }; return () => {/*whatever you need to do for cleanup, eg closing the connection*/} },[]); return (<TokenContext.Provider value={token}>{children}</TokenContext.Provider>) } export const useToken = () => useContext(TokenContext)En su código de nivel superior, agregue (después de importar, por supuesto)
ReactDOM.render( <React.StrictMode> <TokenProvider> <GlobalStyle /> <App ws={ws} token={token} /> </TokenProvider> </React.StrictMode>, document.getElementById('root') ); Y ahora puede utilizar el gancho useToken donde necesite el token como const token = useToken()
Alternativamente, puede usar un administrador de estado global como Redux o MobX o uno de los miles que existen para React y ya no puedo realizar un seguimiento
dentro de su componente de App , simplemente use un gancho useEffect con token como una dependencia como
useEffect(()=>{ /* token changed do something */ },[token])