Looping on objects // Error: Objects are not valid as a React child

Question

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

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

有一个像下面这样的文件，其中包含一个对象。我要从 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>

    )
}

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

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

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

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 对象包含一个数组，这是一种对象，不能保存在 React 渲染中 return.

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

删除/跳过 location_suggestions 键以避免错误。
为 location_suggestions

Looping on objects // Error: Objects are not valid as a React child

Looping on objects // Error: Objects are not valid as a React child

javascript

loops

reactjs

map-function