Javascript 在对象上循环//错误：对象作为子对象无效

我在对象上循环时遇到问题。我无法解决它。请帮帮我

我正在进行一个React项目，以提高我的技能，并将使用React挂钩

下面有一个类似的文件，其中包含一个对象。我将从api中获取。 我想在页面上显示我需要的对象详细信息

我试过很多方法来解决这个问题，但都不管用

我并没有添加我尝试过的所有代码，但下面有一个简单的代码，它告诉了我的目标。在React，JS.中迭代对象的正确解决方案是什么

提前谢谢

import React from 'react';

export default function ValueRef() {

    const myList = {
        "location_suggestions": [
          {
            "id": 61,
            "name": "London",
            "country_id": 215,
            "country_name": "United Kingdom",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_215.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 142,
            "state_name": "England and Wales",
            "state_code": "England and Wales"
          },
          {
            "id": 3454,
            "name": "London, ON",
            "country_id": 37,
            "country_name": "Canada",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_37.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 124,
            "state_name": "Ontario",
            "state_code": "ON"
          },
          {
            "id": 5836,
            "name": "London, KY",
            "country_id": 216,
            "country_name": "United States",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_216.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 85,
            "state_name": "Kentucky",
            "state_code": "KY"
          },
        ],
        "status": "success",
        "has_more": 0,
        "has_total": 0,
        "user_has_addresses": true
      }
   
    console.log(myList)

    return (
        <div>{
            Object.values(myList).map((detail)=>(<div>{detail}</div>))
        
        }</div>

    )
}

---

这是因为您正在对嵌套对象进行迭代，需要对其进行不同的处理

过于简化对象，它是这样的：

const myList = {
        "location_suggestions": [ ...objects ],
        "status": "success",
        "has_more": 0,
        "has_total": 0,
        "user_has_addresses": true
      }

现在，当您这样做时：

Object.values(myList).map((detail)=>(<div>{detail}</div>))

Object.values（myList.map）（（细节）=>（{detail}））

正如您在第一次迭代本身中所看到的那样，

detail

对象包含一个数组，它是一种对象类型，不能保存在React渲染返回中

您的问题有两种解决方案

删除/跳过

位置建议

键以避免错误

为

位置建议创建单独的迭代逻辑

---

您想迭代

myList.location\u suggestions

还是整个

myList

状态，是否有更多…？如果您觉得满意，请接受答案

Object.values(myList).map((detail)=>(<div>{detail}</div>))