React/Next.js中如何在map循环内添加cat_name条件判断

你可以通过两种方式实现需求，同时需要注意JSX中不能直接使用if语句，要改用表达式语法：

方案一：先过滤数据再渲染 #

先筛选出符合cat_name!="" || cat_name=="pinned"条件的数据，再进行map渲染，逻辑更清晰：

{students.data?.length > 0 &&
  students.data
    .filter(blog => blog.cat_name !== "" || blog.cat_name === "pinned")
    .map((blog) => (
      <div key={blog.id}>
        {blog.cat_name}
        {/* 这里写符合条件后的后续代码 */}
      </div>
    ))
}

方案二：在map内部做条件判断 #

如果需要保留所有列表项，仅根据条件展示不同内容，用三元表达式替代if/else语句：

{students.data?.length > 0 &&
  students.data.map((blog) => (
    <div key={blog.id}>
      {(blog.cat_name !== "" || blog.cat_name === "pinned") ? (
        <>
          {blog.cat_name}
          {/* 符合条件时的后续代码 */}
        </>
      ) : (
        <>
          {/* 不符合条件时的后续代码 */}
        </>
      )}
    </div>
  ))
}

注意事项 #

• 列表渲染必须给每个项添加唯一的key属性（示例中用blog.id，你可以替换为数据中实际的唯一标识），避免React警告。
• 方案一更适合仅需要渲染符合条件项的场景，能减少不必要的渲染逻辑；方案二则适用于需要保留所有项但差异化展示的场景。

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