React中array.forEach返回JSX页面不显示但console.log正常的原因

核心问题：forEach() 无法返回渲染所需的元素数组 #

你用forEach()遍历项目数组时，这个方法不会返回任何值（返回undefined），它只是单纯执行回调函数里的操作。所以你的findParentsProject函数最终返回的是undefined，React自然无法渲染任何内容。而console.log能正常输出，是因为forEach确实遍历了数组，回调里的日志语句被执行了。

修复方案：用map()替代forEach() #

map()方法会遍历数组并返回一个新数组，刚好符合React渲染元素列表的需求。同时注意不要用循环的index作为key，改用每个项目唯一的id，这是React推荐的最佳实践。

修改后的findParentsProject函数：

function findParentsProject(brands, id, parent = null) {
  for(let brand of brands){
    const result = brand.id === id ? parent
                : brand.projects && findParentsProject(brand.projects, id, brand);
    if (result) 
    {
      return Object.values(result.projects).map((project) =>{
        return <p key={project.id}>{project.id}</p>
      })
    }
  }
}

额外说明 #

递归逻辑本身是能找到目标项目的父级的，只是渲染部分用错了数组方法。替换成map后，函数会返回包含<p>元素的数组，React就能正常渲染这些元素了。

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