Quiero implementar una funcionalidad que cargaría una lista de objetos de una llamada REST cuando la página se carga por primera vez y luego consumiría nuevos objetos de los eventos de WebSocket y los actualizaría/agregaría correspondientemente.
const [objects, setObjects] = useState([]) useEffect(() => { axios.get(`${process.env.REACT_APP_REST_API}/objects`) .then(resp => setObjects(resp.data)) }, []) const ws = new WebSocket(`${process.env.REACT_APP_WS_API}/objects`) ws.onmessage = (event) => { const obj = JSON.parse(event.data) const items = [...objects] const index = items.findIndex((it) => it.id === obj.id) if (index === -1) { items.push(obj) } else { items[index] = obj } setObjects(items) };Este código no funciona. Abre conexiones WS varias veces. También los datos iniciales desaparecen de vez en cuando y solo se muestra el último objeto. Entiendo que está relacionado con el hecho de que reaccionar vuelve a renderizar el componente. Y el problema con los elementos que desaparecen probablemente esté relacionado con el alcance del cierre utilizado en el controlador WS. Al mismo tiempo, no tengo idea de cómo resolverlo en React.
P: ¿Cómo puedo precargar elementos con una llamada REST y seguir actualizándolos consumiendo más eventos de WebSocket en un componente React?
const [objects, setObjects] = useState([]) useEffect(() => { axios.get(`${process.env.REACT_APP_REST_API}/objects`) .then(resp => setObjects(resp.data)); const ws = new WebSocket(`${process.env.REACT_APP_WS_API}/objects`) ws.onmessage = (event) => { const obj = JSON.parse(event.data) const index = objects.findIndex((it) => it.id === obj.id) if (index === -1) { setObjects((current)=>[...current, obj]); } else { items[index] = obj setObjects((current)=> current[index]= obj); } }; return () => { ws.close(); } }, [])