Estoy usando react-firebase-hooks https://github.com/CSFrequency/react-firebase-hooks/tree/v4.0.2/database#full-example
A continuación se devuelven los valores cuando console.log(v.val()) y cuando hago console.log(v.val().name) no está definido.
{ 1: { id: 1, name: "bob", status: "student" } 2: { id: 2, name: "sam", status: "student" } }Cuando trato de representar los datos anteriores. Recibo el error Los objetos no son válidos como hijo de React. Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
import { ref, getDatabase } from 'firebase/database'; import { useList } from 'react-firebase-hooks/database'; const database = getDatabase(firebaseApp); const DatabaseList = () => { const [snapshots, loading, error] = useList(ref(database, 'list')); return ( <div> <p> {error && <strong>Error: {error}</strong>} {loading && <span>List: Loading...</span>} {!loading && snapshots && ( <React.Fragment> <span> List:{' '} {snapshots.map((v) => ( <React.Fragment key={v.key}>{v.val()}, </React.Fragment> ))} </span> </React.Fragment> )} </p> </div> ); };¿Cómo renderizo mis datos correctamente?
Esto se debe a que v.val() es un objeto de objetos, y como está interesado en el name , debe obtener los valores del primer objeto y luego mapearlo y, por lo tanto, acceder al name .
import { ref, getDatabase } from 'firebase/database'; import { useList } from 'react-firebase-hooks/database'; const database = getDatabase(firebaseApp); const DatabaseList = () => { const [snapshots, loading, error] = useList(ref(database, 'list')); return ( <div> <p> {error && <strong>Error: {error}</strong>} {loading && <span>List: Loading...</span>} {!loading && snapshots && ( <span> List:{' '} {snapshots.map((v,i) => ( Object.values(v.val()).map((obj,j) => <span key={i+j}>{obj.name}, </span> ) ))} </span> )} </p> </div> ); };