React-js：对象作为 React 子项无效答案

【问题标题】：React-js: Objects are not valid as a React childReact-js：对象作为 React 子项无效
【发布时间】：2021-08-18 11:01:57
【问题描述】：

我在 React 方面并不出色，但我已经研究了几个小时而没有希望，所以如果有人知道这里的问题，我会很感激知道为什么这是错误的以及将来如何避免这个问题。

错误：对象作为 React 子对象无效（找到：带有键 {} 的对象）。如果您打算渲染一组子项，请改用数组。

import { Avatar, IconButton } from "@material-ui/core";
import React, { useEffect, useState } from "react";
import "./Sidebar.css";
import SidebarChat from "./SidebarChat";
import SearchIcon from "@material-ui/icons/Search";
import RateReviewOutlinedIcon from "@material-ui/icons/RateReviewOutlined";
import { useSelector } from "react-redux";
import { selectUser } from "./features/userSlice";
import db, { auth } from "./firebase";

function Sidebar() {
  const user = useSelector(selectUser);
  const [chats, setChats] = useState([]);

  useEffect(() => {
    db.collection("chats").onSnapshot((snapshot) =>
      setChats(
        snapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      )
    );
  }, []);

  const addChat = () => {
    const chatName = prompt("Please enter a chat name");
    if (chatName) {
      db.collection("chats").add({
        chatName: chatName,
      });
    }
  };

  return (
    <div className="sidebar">
      <div className="sidebar__header">
        <Avatar
          onClick={() => auth.signOut()}
          src={user.photo}
          className="sidebar__avatar"
        />
        <div className="sidebar__input">
          <SearchIcon />
          <input placeholder="Search" />
        </div>
        <IconButton varient="outlined" className="sidebar__inputButton">
          <RateReviewOutlinedIcon onClick={addChat} />
        </IconButton>
      </div>
      <div className="sidebar__chats">
        {chats.map(({ id, data: { chatName } }) => (
          <SidebarChat key={id} id={id} chatName={chatName} />
        ))}
      </div>
    </div>
  );
}

【问题讨论】：

标签： reactjs

【解决方案1】：

很可能，您正在返回一个要在侧边栏聊天中显示的对象。如果它有一个对象类型的值，HTML 将无法按原样显示对象。它必须是某种原始类型，例如整数、字符串等，或者它必须是原始类型的数组。在这种情况下，可能在 SidebarChat 组件中，您可能正在使用从 Sidebar 组件传递的 id 返回或显示聊天。

您可以使用该对象的键来显示它。

let chats = [
{
   id: 1,
   data: "Hello"
},
{
   id: 2,
   data: "World"
}
];

第一次聊天可以显示为：

let chatString = `No. of chats is: ${chats.length}. And the first chat is: ${chat[0].data}`;

这将给出如下输出：

No. of chats is: 2. And the first chat is: Hello

【讨论】：

谢谢！我找到了我正在使用的道具，并给了它们正确的语法，就像你上面提到的那样——对象现在是字符串。很好的解释和例子。

【解决方案2】：

不要在没有条件检查的情况下返回聊天映射以查看其是否已填充。

改为这样做：

<div className="sidebar__chats">
        {chats && chats.map(({ id, data: { chatName } }) => (
          <SidebarChat key={id} id={id} chatName={chatName} />
        ))}
</div>

【讨论】：