Javascript 如何在react应用程序中循环对象并在renders return语句中显示

我知道那里有很多类似的帖子，但没有一个专门帮助过我

我有一个目标：

   const people = {
    "John": {
      "firstname": "John",
      "lastname": "Smith",
      "age": 41,
      "phone": "0401555666"
    },
    "Jack": {
      "firstname": "Jack",
      "lastname": "Williams",
      "age": 43,
      "phone": "0401777888"
    }
  }

我已将此添加到组件状态：

this.state = { people, };

我想要实现的是在components render（）methods return（）语句中，将人员及其详细信息写入无序列表

• 约翰
  • 名字：约翰
  • 姓氏：史密斯
  • 年龄:41
  • 电话：0401555666
• 杰克
  • 名字：杰克
  • 姓氏：威廉姆斯
  • 年龄:43
  • 电话：0401777888

人们可以改变，所以我不能直接引用个人，比如：

Object.entries(this.state.people.John)

看起来我不能在render（）methods return（）语句中使用for循环。所以我确实有两个要求，这两个我都不能达到。第一种方法是简单地在对象中循环。我遇到的另一个问题是在render（）return（）语句中执行此操作，并将其写入列表

在return（）语句之外的render（）方法中，我尝试了以下方法：

const myPeople = Object.entries(this.state.people);
console.log("My People: " + myPeople);

我得到的结果是：

My People: John,[object Object],Jack,[object Object]

如果我在return（）语句中使用以下命令：

{Object.entries(this.state.people)}

const a = Object.entries(this.state.people).map(x => console.log(x))

我在浏览器中遇到此错误：

Objects are not valid as a React child (found: object with keys {firstname, lastname, age, phone}). If you meant to render a collection of children, use an array instead.

我还在return（）语句之外的render（）方法中尝试了这一点：

{Object.entries(this.state.people)}

const a = Object.entries(this.state.people).map(x => console.log(x))

这在控制台中看起来更好了： [console.log.jpg（图片）][1]

但是当我尝试在render（）方法return（）语句中使用它时，如下所示：

{Object.entries(this.state.people).map(x => <ul><li>{x}</li></ul>)}

const people = {
    "John": {
        "firstname": "John",
        "lastname": "Smith",
        "age": 41,
        "phone": "0401555666"
    },
    "Jack": {
        "firstname": "Jack",
        "lastname": "Williams",
        "age": 43,
        "phone": "0401777888"
    }
}

render() {
    return (
        <>
            <ul>
                {Object.entries(people).map(item => (
                    <li key={item[0]}>
                        {item[0]}:
                        <ul>
                            {Object.entries(item[1]).map(subItem => (
                                <li key={subItem[0]}>
                                    {subItem[0]}: {subItem[1]}
                                </li>
                            ))}
                        </ul>
                    </li>
                ))}
            </ul>
        </>
    )
}

只有这样我才能让它工作，这对我没有帮助，因为我必须事先知道名字。我可以通过以下方式获得这些名称：

Object.keys(this.state.people)

但我不知道如何利用这一优势。我试过几次，但都没有成功。例如：

const keys = Object.keys(this.state.people);
const myPeople = keys.map(x => this.state.people.x)
console.log("My People: " + myPeople)

这是：

const keys = Object.keys(this.state.people);
for (let key of keys) {
console.log("My People: " + this.state.people.key)
}

但这两种情况都有回报：

My People: ,

因此，正如您所看到的，我真的被卡住了，并且已经被困了好几个小时，即使我能够找到循环对象的正确方法，我仍然不知道如何使用render（）methods return（）语句中的值。另外，我不想使用jquery$（'#id'）.append（…）来写入dom

请帮帮我，也许我真的很蠢，但是没有其他帖子可以帮我，我已经试过了，所以很抱歉，如果答案在那里，我没有找到。我所发现的并不是100%完全如此

Object.keys(people).forEach(function (key) { 
    console.log(people[key]); 
}

---

像这样在对象上循环。

您与object.keys解决方案非常接近。
你唯一需要改变的是：

const myPeople = keys.map(x => this.state.people[x])

---

如果使用不带数组访问器（“[]”）的x，则会尝试获取未定义的字段调用x。但是您希望以字段键的形式访问x的值。

因为对象中有对象，所以可以使用

对象项
在循环中使用循环对其进行迭代

这就是你想要的：

<ul>
  {Object.entries(people).map([key, value] => (
    <li key={key}>
      {key}
      <ul>
        {Object.entries(value).map([subKey, subValue] => (
          <li key={subKey}>
            {subKey}: {subValue}
          </li>
        ))}
      </ul>
    </li>
  ))}
</ul>


{Object.entries（people.map）（[key，value]=>(

{key}

{Object.entries（value）.map（[subKey，subValue]=>(

{subKey}:{subValue}

))}


))}

我会使用如下内容：

{Object.entries(this.state.people).map(x => <ul><li>{x}</li></ul>)}

const people = {
    "John": {
        "firstname": "John",
        "lastname": "Smith",
        "age": 41,
        "phone": "0401555666"
    },
    "Jack": {
        "firstname": "Jack",
        "lastname": "Williams",
        "age": 43,
        "phone": "0401777888"
    }
}

render() {
    return (
        <>
            <ul>
                {Object.entries(people).map(item => (
                    <li key={item[0]}>
                        {item[0]}:
                        <ul>
                            {Object.entries(item[1]).map(subItem => (
                                <li key={subItem[0]}>
                                    {subItem[0]}: {subItem[1]}
                                </li>
                            ))}
                        </ul>
                    </li>
                ))}
            </ul>
        </>
    )
}

const people={
“约翰”：{
“名字”：“约翰”，
“姓氏”：“史密斯”，
“年龄”：41岁，
“电话”：“0401555666”
},
“杰克”：{
“名字”：“杰克”，
“姓氏”：“威廉姆斯”，
“年龄”：43岁，
“电话”：“0401777888”
}
}
render（）{
返回(

{Object.entries（people.map）（项=>(

{item[0]}：

{Object.entries（项[1]）.map（子项=>(

{子项[0]}:{子项[1]}

))}


))}

)
}

如果对象是动态的，则将
people
对象置于
render（）
方法之外。
对于动态键，您应该这样做-
this.state.people[key]
和
this.state.people[x]