React渲染对象数组键列表无输出问题排查

你提供的JSON数据：

[
 { "Environments": ["DEV", "QA", "PROD"] },
 { "Products": ["Product A", "Product B", "Product C"] },
 { "Releases": [1,2,5] }
]

期望渲染的HTML结构：

<ul>  
 <li>Environments</li>
 <li>Products</li>
 <li>Releases</li>
</ul>

控制台能正常输出键的JavaScript代码：

var topics = [
    { "Environments": ["DEV", "QA", "PROD"] },
    { "Products": ["Product A", "Product B", "Product C"] },
    { "Releases": [1,2,5] },
]

topics.map(topic => { 
    Object.entries(topic).map( ([key, values]) => { 
        console.log(key);
        console.log(values);
    })
})

但React组件中无输出也无报错：

export default function() 
{
    const topics = //...topics from json
    
    return (
        <>
        <h1>Topics</h1>
        <ul>
            
            {topics.map(topic => { Object.entries(topic).map( ([key, values]) => { 
                <li>key: {key}</li>
            })})}
        </ul>
        </>
   )
}

问题原因 #

你的React组件代码存在两个关键问题：

1. map函数未返回值：箭头函数用{}包裹代码块时，必须显式使用return返回内容。你内层和外层的map都没有返回JSX元素，React接收不到要渲染的节点，所以无输出。
2. 缺少唯一key属性：React列表渲染要求每个子元素必须有唯一的key属性，这是React diff算法的核心依赖，虽然不会触发报错，但属于不规范写法。

修正后的代码 #

export default function Topics() 
{
    const topics = [
        { "Environments": ["DEV", "QA", "PROD"] },
        { "Products": ["Product A", "Product B", "Product C"] },
        { "Releases": [1,2,5] },
    ]
    
    return (
        <>
            <h1>Topics</h1>
            <ul>
                {topics.map((topic) => { 
                    // 外层map返回内层map的渲染结果
                    return Object.entries(topic).map( ([key]) => { 
                        // 内层map返回JSX元素，并添加唯一key
                        return <li key={key}>{key}</li>
                    })
                })}
            </ul>
        </>
   )
}

更简便的实现方式 #

因为数组中每个元素都是单键对象，可以先提取所有键到一个数组，再直接渲染：

export default function Topics() 
{
    const topics = [
        { "Environments": ["DEV", "QA", "PROD"] },
        { "Products": ["Product A", "Product B", "Product C"] },
        { "Releases": [1,2,5] },
    ]
    // 提取所有对象的键到新数组
    const topicKeys = topics.map(item => Object.keys(item)[0])
    
    return (
        <>
            <h1>Topics</h1>
            <ul>
                {topicKeys.map(key => <li key={key}>{key}</li>)}
            </ul>
        </>
   )
}

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