Estoy usando la base de datos Firebase en mi proyecto. Cuando recupero mis datos, la carga útil se ve así:
{ -randomId123: {name: "foo", surname: "bar" }, .... }¿Cómo puedo representar correctamente mi lista en mi componente?
export const App = () => { const [data, setData] = useState(dummyData); const items = data.map((v) => { console.log(v.val()) }); setData(items) return ( <div> <> {data.map((d) => { <p> {d.key} {d.name} {d.surname} </p> })} </> </div> ); };Rendimiento esperado:
<p> randomId123 foo bar <p>Los objetos no son válidos como hijos de React (encontrado: objeto con claves {-randomId123, -randomId456, -randomId789}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
El siguiente es un object .
{ -randomId123: {name: "foo", surname: "bar" }, .... } Si esto fuera data , es posible que no se pueda iterar usando data.map() .
Para renderizar:
<p> randomId123 foo bar <p>Intente a continuación:
<div> {Object.keys(data).map(k => ( <p> {k} {data[k].name} {data[k].surname} </p> )} </div>