使用多个map函数返回HTML时遇数据展示问题，求技术帮助

你的判断没错，问题确实出在遗漏return语句上，两个嵌套的map都没有返回结果，导致React无法接收到要渲染的元素。

原代码的问题点： #

• 外层map函数：你在if块里执行了内层map，但没有把内层map的结果return出去，外层map整体没有返回值。
• 内层map函数：虽然箭头函数单行可以省略return，但外层是多行箭头函数（带大括号）的情况下，内层map的执行结果需要明确return出去。

修正后的代码： #

Object.keys(patternData).map((pattern) => {
    // 满足条件时返回内层map生成的元素数组
    if (patternData[pattern]['Matches'] && Object.keys(patternData[pattern]['Matches']).length !== 0) {  
        return Object.keys(patternData[pattern]['Matches']).map((matchSymbol) =>
            <p key={matchSymbol}> {matchSymbol} </p>
        )
    }
    // 不满足条件时返回null，避免渲染undefined引发警告
    return null
})      

额外提示： #

• React列表渲染必须给每个元素添加唯一的key属性，所以给<p>加上了key={matchSymbol}，消除控制台警告。
• 如果箭头函数是单行表达式（不带大括号），可以省略return；但只要用了大括号包裹代码块，就必须手动写return来返回结果。

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