0
148
ViewsError al hacer clic en un elemento: los objetos no son válidos como un niño React
Uso un mapa con marcadores personalizados en el sitio. A la derecha hay una lista de casas que coinciden con los marcadores. Necesito implementar lo siguiente: al hacer clic en un marcador, la casa que corresponde al marcador pasa al 1er lugar en la lista. Las coordenadas del marcador y la información de la casa provienen de Firebase. Ahora he implementado el código para esta lógica, pero cuando hago clic en el marcador, aparece un error: los objetos no son válidos como elementos secundarios de React. ¿Cómo se puede solucionar?
const List = ({ selectedHouse }) => { const [houseTitles, setHouseTitle] = useState([]); useEffect(() => { const q = query(collection(db, "map-markers")); onSnapshot(q, (querySnapshot) => { setHouseTitle( querySnapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })) ); }); }, []); return ( <div style={{ width: "50%" }}> {<ListItem title={houseTitles[selectedHouse]} />} {houseTitles .filter((title, index) => index !== selectedHouse) .map((title, index) => ( <ListItem key={index} title={title.data.title} /> ))} </div> ); }; console.log(houseTitles[selectedHouse]): 
2 answers
Answer question0
Prueba esto:
const List = ({ selectedHouse }) => { const [houseTitles, setHouseTitle] = useState([]); useEffect(() => { const q = query(collection(db, "map-markers")); onSnapshot(q, (querySnapshot) => { setHouseTitle( querySnapshot.docs.map((doc) => ({ id: doc.id, data: doc.data(), })) ); }); }, []); return ( <div style={{ width: "50%" }}> <ListItem title={houseTitles[selectedHouse]?.data?.title} /> {houseTitles ?.filter((title, index) => index !== selectedHouse) ?.map((title, index) => ( <ListItem key={index} title={title?.data?.title} /> ))} </div> ); };0
No necesita corchetes cuando usa componentes como ese;
... ... return ( <div style={{ width: "50%" }}> {houseTitles[selectedHouse] && houseTitles[selectedHouse].data ? <ListItem title={houseTitles[selectedHouse].data.title} />:null } {houseTitles .filter((title, index) => index !== selectedHouse) .map((title, index) => ( <ListItem key={index} title={title.data.title} /> ))} </div> ); ... ... Además, probablemente intente imprimir el título en el componente ListItem pero pase el objeto completo para la Casa seleccionada
Información adicional; La casa seleccionada está vacía en el primer render