React项目嵌套渲染对象时控制台有输出但页面不显示如何解决

• 核心错误是使用了forEach方法执行遍历：forEach没有返回值，始终返回undefined，即便你在回调函数内写了return语句，返回的JSX元素也不会被收集，React拿到undefined自然不会渲染任何内容。
• 控制台能正常打印是因为你遍历的逻辑本身没有问题，只是没有把需要渲染的元素正确返回给React渲染层。

把Object.keys(exp).forEach替换为Object.keys(exp).map，map方法会将每次遍历回调返回的JSX元素收集为数组，可直接被React渲染。同时给列表元素添加唯一key属性，避免React抛出列表渲染警告。

修复后代码如下：

<div>
  {Experience &&
    Experience.map((exp, expIdx) => {
      return (
        <div className="text-white" key={expIdx}>
          {
            // 替换forEach为map
            Object.keys(exp).map((key) => {
              return (
                <p
                  key={key}
                  dangerouslySetInnerHTML={{
                    __html: exp[key].desc,
                  }}
                />
              );
            })
          }
        </div>
      );
    })}
</div>

注：如果Experience数组的每个元素有唯一标识属性，外层map的key建议替换为业务唯一ID，而非遍历下标expIdx

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