ReactJS：对象作为 React 子对象无效

Question

我目前正在使用 React 和 Firebase 开发一个消息传递应用程序。我正在使用 React Hooks 来使用 state 进行存储和通道。下面的代码就是那个的实现

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

以下代码用于从 firebase 数据库中获取频道

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

并使用以下代码渲染页面中的频道

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

SidebarChannel.js

function SidebarChannel(id,channelName) {
    return (
      <div className="sidebarChannel">
      <h4>
      <span className="sidebarChannel__hash">#</span>
      {channelName}
    </h4>
  </div>
}

所以我的问题是我在运行此代码时遇到错误，无法弄清楚其中有什么问题。错误是

Answer 1

你正在使用解构，所以 SidebarChannel 组件应该是：

function SidebarChannel({ id, channelName }) {
    return (
      <div className="sidebarChannel">
      <h4>
      <span className="sidebarChannel__hash">#</span>
      {channelName}
    </h4>
  </div>
}