如何在JSX中正确渲染两个关联数组？

你现在的问题核心是没给频道和分类做关联过滤，导致每个分类下都会把所有频道全列一遍。要实现每个分类只显示自己名下的频道，得给频道遍历加个筛选逻辑：

假设你的channels数组里每个对象都有categoryId字段（和分类的_id对应），修改代码如下：

<div className="fixed inset-0 m-auto bg-[#2F3136]">
  <div>
    <h1>{server?.title}</h1>
    <ArrowDropDownOutlinedIcon />
  </div>

  {categories?.map((category) => (
    <div key={category._id}>
      <h1>{category.title}</h1>
      {/* 只筛选当前分类下的频道 */}
      {channels
        ?.filter(channel => channel.categoryId === category._id)
        .map((channel) => (
          <h1 key={channel._id}>{channel.title}</h1>
        ))}
    </div>
  ))}
</div>

关键说明：

• 用filter方法把当前分类对应的频道筛选出来，再遍历这些匹配的频道
• 给频道的map循环加上key（用channel._id），符合React的渲染规范

如果你的分类与频道的关联字段不是categoryId，替换成实际的字段名即可。这样每个分类下只会显示属于它的频道，就不会出现重复或全量显示的问题了。

内容的提问来源于stack exchange，提问作者user16949958