React中嵌套Array的map方法不渲染问题排查

这是JavaScript语法问题，和React无关。

你的代码里内层的d.array.map回调函数存在问题：使用大括号{}包裹函数体时，没有显式返回要渲染的<div>{el}</div>元素，导致map执行后得到的是一组undefined，React不会渲染这些无效值。

原问题代码片段： #

{d.array.map((el) => {
    <div>{el}</div>
})}

两种修复方式： #

• 显式添加return语句：

{d.array.map((el) => {
    return <div>{el}</div>
})}

• 去掉大括号，利用箭头函数的隐式返回特性：

{d.array.map((el) => <div>{el}</div>)}

另外，直接渲染{d.array[0]}能正常显示，是因为这是直接读取数组元素的具体值，不存在回调函数返回值缺失的问题，所以能被React正常渲染。

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