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

Posted 2023-02-19

【中文标题】错误：对象作为 React 子项无效（找到：带有键 的对象）。如果您打算渲染一组孩子，请改用数组

【英文标题】：Error: Objects are not valid as a React child (found: object with keys ). If you meant to render a collection of children, use an array instead错误：对象作为 React 子项无效（找到：带有键 的对象）。如果您打算渲染一组孩子，请改用数组

【发布时间】：2021-02-07 05:14:33

【问题描述】：

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

    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;

创建新频道后，我收到此错误 - 错误：对象作为 React 子项无效（找到：带有键 的对象）。如果您打算渲染一组子项，请改用数组。

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

【参考方案1】：

您是否检查过您的状态设置是否正确？ 您正确初始化了通道状态：

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

您的 state.channels 在更新后仍然是有效的数组吗？

如果您还没有使用它，我可以建议您查看适用于 Chrome 的 React Developer Tools。它允许您在正在运行的应用程序中查看您的状态： https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi