Tengo el siguiente código dentro de mi componente React:
const [utilData, setUtilData] = useState([]); useEffect(() => { ws.current.onmessage = e => { const data = JSON.parse(e.data); console.log("data: ",data); setUtilData(data) }; }, []); El archivo console.log de datos devuelve la siguiente información, que debe almacenarse dentro del estado utilData .
[ { "env_name": "the-matrix", "score_one": 24, "memory": 1024, "cpu_temp": 66.4 } ] El problema del que no estoy seguro y no puedo ver lo que estoy haciendo mal es cuando intento acceder a cada propiedad usando el método de matriz .map sobre utilData , es decir:
return ( <div> { utilData.map((data, i) => ( <span>{data.env_name}</span> )) } </div> )Recibo el error: TypeError: utilData.map no es una función y no estoy seguro de por qué
actualice el retorno debajo del fragmento, ya que inicialmente los datos útiles podrían ser nulos
return ( <div> { utilData ? utilData.map((data, i) => ( <span>{data.env_name}</span> )) : null } </div> )