单击元素时出错：对象作为 React 子项无效

Question

我在网站上使用带有自定义标记的 map。 右侧是与标记匹配的房屋列表。 我需要执行以下操作：单击标记时，与标记对应的房子会排在列表的第 1 位。 标记坐标和房屋信息来自 Firebase。 现在我已经实现了这个逻辑的代码，但是当我点击标记时，我得到一个错误——对象作为 React 子级无效。 如何解决？

 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]):

Answer 1

使用这样的组件时不需要大括号；

...
...
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>
  );
...
...

此外，您可能尝试在ListItem组件中打印标题，但您将整个 object 传递给 selectedHouse

附加信息; selectedHouse 在第一次渲染时为空

Answer 2

尝试这个：

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>
  );
};