ReactJS 嵌套map迭代器无内容输出，嵌套循环返回JSX有什么注意事项？

你的代码核心问题是外层map的回调函数没有返回内层map生成的JSX数组，外层map遍历后得到的全是undefined，因此没有内容渲染到DOM中。

嵌套循环返回JSX的注意事项 #

• 每一层map的回调函数都必须显式返回生成的JSX内容：如果回调函数使用带大括号的函数体写法，必须手动添加return语句；如果使用不带大括号的隐式返回写法可以省略return，注意写法合规即可。
• 嵌套map返回的是二维JSX数组，React可以直接渲染该结构，不需要额外包裹节点，如果不希望生成多余的DOM容器，也可以用Fragment包裹内层内容。
• 每一层遍历的JSX根节点都需要设置唯一的key属性，目前你只给内层<IonItem>设置了key，若外层存在多个message遍历项，也需要给外层对应的根节点添加唯一key，避免渲染异常。
• 注意补全空值判断逻辑：你目前只判断了chatList不为undefined，建议补充判断chatList.data、chatList.data[0]、chatList.data[0][0]、chatList.data[0][1]都存在，避免数组下标访问时报错。

修正后的代码示例 #

{  chatList !== undefined && chatList.data?.[0]?.[0]?.map((message, messageIndex) => {
    // last message stuff
    // 此处添加return，把内层map生成的JSX数组返回给外层map
    return chatList.data[0][1].map((participant, participantIndex) => {
        return <IonItem key={participantIndex}>
            <IonAvatar slot="start">
                {/*<img src={}/>*/}
            </IonAvatar>
            <IonLabel>
                <h2>{participant.identity}</h2>
                <p>{message.body}</p>
                <p>{moment(message.dateCreated).format('MM/DD/YY HH:mm')}</p>
            </IonLabel>
        </IonItem>
    })
})}

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