映射对象时，对象作为 React 子对象无效答案

【问题标题】：Objects are not valid as a React child when I mapping an object映射对象时，对象作为 React 子对象无效
【发布时间】：2022-01-10 11:04:48
【问题描述】：

我开始做出反应，但无法解决我的问题。我有一个对象

   modes= {
        "easyMode": {
        "field": 5
        },
        "normalMode": {
        "field": 10
        },
        "hardMode": {
        "field": 15
        }
        }

我需要映射这种模式（easyMode、normalMode 和 hardMode），但我知道我不能映射对象，只能映射数组。对，但这也行不通

const arrayOfObjects = [{ modes }];

return (
    <ul> {arrayOfObjects.map(mode=> <li key={mode}>{mode} </li>)}</ul>)

我需要如何正确地做到这一点？

【问题讨论】：

如果要将键放入数组中，可以使用Object.keys(modes) 然后映射
@NickParsons，好的，但是这样我有一个错误'arrayOfObjects.keys(modes).map is not a function'
这与我上面建议的代码不同吗？ Object.keys(modes).map() 是我的意思

标签： javascript arrays reactjs object react-hooks

【解决方案1】：

我认为这是一个重复的问题，你可以在这个问题here找到完整的答案

但作为一个快速的答案，对于对象，您必须像这样迭代：

Object.keys(modes).map ( mode => {
   console.log(mode,modes[mode]) // you can access the values like this
})

【讨论】：

【解决方案2】：

您可以使用Object.keys() 获取带有模式键的数组

const modes = {
  easyMode: {
    field: 5,
  },
  normalMode: {
    field: 10,
  },
  hardMode: {
    field: 15,
  },
};

const modesKeys = Object.keys(modes); // ['easyMode','normalMode','hardMode' ]

return (
  <ul> {modesKeys.map(mode => <li key={mode}>{mode}</li>)}</ul>
)

【讨论】：

非常感谢！我真的很喜欢这个变种！