React使用map遍历对象内嵌套数组元素时未正常渲染问题

问题根因 #

你的map回调函数使用了带花括号的函数体，但没有显式返回JSX元素，导致遍历返回的数组全为undefined，React默认不会渲染undefined值，因此列表区域为空。

解决方法 #

有两种常用修复方案：

方案1：显式添加return语句 #

如果回调函数内有额外逻辑需要执行，在函数体内添加return返回需要渲染的元素：

<ul>
  Cool
  {f_data.P_words.map((obj) => {
    return <li key={obj.freq}>{obj.freq}</li>;
  })}
</ul>

方案2：使用隐式返回 #

如果只有单行渲染逻辑，去掉回调函数的花括号，直接写返回的JSX即可触发箭头函数的隐式返回：

<ul>
  Cool
  {f_data.P_words.map((obj) => <li key={obj.freq}>{obj.freq}</li>)}
</ul>

额外优化提示 #

当前你用freq作为li的key属性，如果后续列表中出现频率相同的词，会导致React渲染异常。如果word字段是唯一值，建议替换为key={obj.word}，或者给P_words的每个项添加唯一的id字段作为key。

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