reactjs - 如何在React组件中显示对象的键和值

Question

这个问题已经有答案了:

How to loop an object in React? (8 个回答)

已关闭 4 年前。

我有ControlSection其 Prop 之一是 statistics 的组件对象 Prop 。我想显示 <h2>对象的所有键和值。我该怎么做？

控制部分:

const ControlSection = ({ statistics }) => {
    return (
        <div className='gameStatistics'>
            {
                Object.keys(statistics).forEach(key => 
                    <h2>key: statistics[key]</h2>
                )
            }
        </div>
    )
}

统计示例:

const statistics = {
    Score: score,
    Level: level,
    Best: bestScore,
};

Answer 1

forEach返回undefined 。使用 Array#map ，它返回新数组中每个项目的 JSX。

JSX 还需要 { }大括号将文本评估为 JS。

由于您正在创建一系列 <h2>元素，React 需要 key要在元素上设置的属性。使用key来自对象的 s 就足够了，因为它们保证是唯一的字符串。但是，您可以考虑使用列表( <ul> 或 <ol> 父元素和 <li> 子元素)作为标题元素的替代方案。

此外，您还可以使用 Object.entries 以比 statistics[key] 稍微更直观的方式访问对象中每对的键和值:

const ControlSection = ({ statistics }) => {
    return (
        <div className='gameStatistics'>
            {
                Object.entries(statistics).map(([key, val]) => 
                    <h2 key={key}>{key}: {val}</h2>
                )
            }
        </div>
    );
};