Cualquier ayuda sería apreciada. Obtengo mis datos de una base de datos externa y los introduzco con observables. El componente se actualiza cuando cambia el estado de los jugadores, pero no se actualiza cuando cambia el estado de los monstruos.

Puedo ver que el estado es correcto y se completa con datos distintos de cero al depurar el componente con React Developer Tools. Si obligo a los jugadores a actualizar de nuevo, vuelve a dibujar los monstruos correctamente, pero setMonsters no está provocando una nueva representación.

 export default () => { const [players, setPlayers] = useState({}) const [monsters, setMonsters] = useState({}) useEffect(() => { const playersSub = players$.subscribe(setPlayers) const monstersSub = monsters$.subscribe(x => { console.log('should be re-rendering...') setMonsters(x) }) return () => { playersSub.unsubscribe() monstersSub.unsubscribe() } }, []) return ( <Section style={{ backgroundColor: medium, borderRadius: '.5rem', flex: '1 0 0' }}> {Object.entries(players).map(([key, x], i) => { if (!x.investigator) return <div key={key} /> return <Player player={x} key={key} /> })} {Object.entries(monsters).map(([key, x]) => { console.log('what is going on?') return <Monster monster={x} key={key} /> })} </Section> ) }

Extrañamente, cuando actualizo la página, se actualiza y muestra el renderizado correcto por solo una fracción de segundo antes de que se cierre.

EDITAR

De acuerdo, lo "arreglé", pero aún me gustaría saber qué está causando el problema si alguien puede arrojarme algo de luz sobre este problema.

La solución es tan extraña como el problema para mí, y me considero bastante familiarizado con React y RxJS.

Cambié la suscripción a esto.

 useEffect(() => { const playersSub = players$.subscribe(setPlayers) const monstersSub = monsters$.subscribe(x => { setMonsters({ ...x }) }) return () => { playersSub.unsubscribe() monstersSub.unsubscribe() } }, [])

Y ahora funciona según lo previsto. Eso no parece que deba hacer nada.