React中分类下无项目时，使用map/filter遍历如何正确显示自定义占位内容？

嘿，这个问题我太熟悉啦！咱们先拆解下你遇到的问题：最开始用map的时候，每遇到一个不匹配当前分类的项目，就会返回一个<p>none</p>，所以才会出现满屏的none——这显然不是你想要的效果。

你转向用filter的思路完全正确！接下来只需要多一步判断，就能实现“无匹配时仅显示一次none”的需求，具体做法如下：

步骤1：先筛选匹配的项目 #

先把当前分类下的所有项目筛选出来，存成一个变量，这样后续判断和渲染都更清晰：

const matchedProjects = this.props.projects.filter(project => category.id === project.category.id);

步骤2：根据筛选结果决定渲染内容 #

用三元运算符判断筛选后的数组长度：如果有匹配项，就循环渲染项目；如果没有，就显示一次“none”：

return (
  <div>
    {matchedProjects.length > 0 ? (
      matchedProjects.map(project => (
        <div key={project.id} className="project">
          <div className="project-box"><p>{project.name}</p></div>
        </div>
      ))
    ) : (
      <p>none</p>
    )}
  </div>
);

可选：更简洁的写法（逻辑或） #

如果你喜欢更紧凑的代码，也可以用逻辑或运算符实现——因为空数组在JSX中会被视为“假值”，所以当map返回空数组时，会自动渲染后面的提示：

return (
  <div>
    {matchedProjects.map(project => (
      <div key={project.id} className="project">
        <div className="project-box"><p>{project.name}</p></div>
      </div>
    )) || <p>none</p>}
  </div>
);

这样一来，每个分类下只会在完全没有匹配项目的时候显示一次“none”，完美解决你之前的问题～

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