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

Question

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

我正在进行一个 React 项目以提高我的技能并打算使用 React Hooks。

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

我尝试了很多方法来解决，但它们没有用。

我没有添加我尝试过的所有代码，但下面有一个简单的代码告诉了我的目标。 在 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>

    )
}

---

Error: Objects are not valid as a React child (found: object with keys {id, name, country_id,
country_name, country_flag_url, should_experiment_with, has_go_out_tab, discovery_enabled,
has_new_ad_format, is_state, state_id, state_name, state_code}). If you meant to render a collection
of children, use an array instead.

Answer 1

这是因为您正在迭代嵌套对象，需要区别对待。

过度简化您的 object，它是这样的：

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>))

正如您在第一次迭代中看到的那样， detail object 包含一个数组，它是 object 的一种类型，不能保存在 React 渲染返回中。

您的问题有 2 种解决方案，

1. 删除/跳过location_suggestions键以避免错误。
2. 为location_suggestions创建单独的迭代逻辑