reactjs - 错误 : Objects are not valid as a React child (found: object with keys {}). 如果您打算呈现子集合，请改用数组

Question

我正在尝试在我的应用程序中显示实时 channel 列表，这是给我错误的代码 -

    function Sidebar() {
  const user = useSelector(selectUser);
  const [channels, setChannels] = useState([]);

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

  const addChannel = () => {
    const channelName = prompt("Enter channel name");

    if (channelName) {
      db.collection("channels").add({
        channelName,
      });
    }
  };

  return (
    <div className="sidebar">
      <div className="sidebar_top">
        <h3>Discord Clone</h3>
        <ExpandMoreIcon className="expandMoreIcon" />
      </div>

      <div className="sidebar_channels">
        <div className="sidebarChannels_header">
          <div className="header">
            <ExpandMoreIcon className="expandMoreIcon" />
            <h4>Text Channels</h4>
          </div>

          <IconButton className="IconButton">
            <AddIcon className="addIcon" onClick={addChannel} />
          </IconButton>
        </div>

        <div className="sidebar_channelList">
          {channels.map(({ id, channel }) => (
            <SidebarChannel
              key={id}
              id={id}
              channelName={channel.channelName}
            />
          ))}
        </div>
      </div>

      <div className="sidebar_voice">
        <SignalCellularAltIcon className="voiceIcon" />
        <div className="sidebar_voiceInfo">
          <h4>Voice Connected</h4>
          <p>Stream</p>
        </div>

        <div className="sidebar_voiceIcons">
          <InfoIcon className="icon" />
          <CallIcon className="icon" />
        </div>
      </div>

      <div className="sidebar_profile">
        <Avatar onClick={() => auth.signOut()} src={user.photo} />
        <div className="sidebar_profileInfo">
          <h4>{user.displayName}</h4>
          <p>#{user.uid.substring(0, 5)}</p>
        </div>

        <div className="sidebar_profileIcons">
          <MicIcon className="icon" />
          <HeadsetIcon className="icon" />
          <SettingsIcon className="icon" />
        </div>
      </div>
    </div>
  );
}

export default Sidebar;

创建新 channel 后，出现此错误 -错误:对象作为 React 子对象无效(找到:带有键 {} 的对象)。如果您打算呈现子项集合，请改用数组。

知道是什么导致了错误吗？提前致谢。

Answer 1

您是否检查过您的状态设置是否正确？您正确初始化 channel 状态:

const [channels, setChannels] = useState([]);

更新后你的 state.channels 还是一个有效的数组吗？

如果您还没有使用它，我建议您查看 Chrome 的 React 开发者工具。它允许您在正在运行的应用程序中查看您的状态: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi