[英]Looping on objects // Error: Objects are not valid as a React child
I have a problem looping on object. I couldn't solve it.我在 object 上循环时遇到问题。我无法解决。 Please help me.
请帮我。
I am on a React project to improve my skill and gonna work with React Hooks.我正在进行一个 React 项目以提高我的技能并打算使用 React Hooks。
There is a file like below which contains an object. I'm gonna fetch from an api. I wanna to display the object details which i need on the page.有一个像下面这样的文件,其中包含一个 object。我将从 api 中获取。我想在页面上显示我需要的 object 详细信息。
I've tried a lot of way to solve but they didn't work.我尝试了很多方法来解决,但它们没有用。
I am not adding all the codes what i tried but there is the simple one below which tells my goal.我没有添加我尝试过的所有代码,但下面有一个简单的代码告诉了我的目标。 What is the correct solution to iterate on objects in React, JS..
在 React,JS 中迭代对象的正确解决方案是什么?
Thanks in advance.提前致谢。
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.
This is because you are iterating over nested objects, that needs to be treated differently.这是因为您正在迭代嵌套对象,需要区别对待。
Oversimplifying your object, it is something like this:过度简化您的 object,它是这样的:
const myList = {
"location_suggestions": [ ...objects ],
"status": "success",
"has_more": 0,
"has_total": 0,
"user_has_addresses": true
}
Now, when you do:现在,当你这样做时:
Object.values(myList).map((detail)=>(<div>{detail}</div>))
As you can see in your first iteration itself, the detail
object contains an array, which is a type of object, that cannot be kept in a React render return.正如您在第一次迭代中看到的那样,
detail
object 包含一个数组,它是 object 的一种类型,不能保存在 React 渲染返回中。
There are 2 solutions to your problem,您的问题有 2 种解决方案,
location_suggestions
key to avoid the error.location_suggestions
键以避免错误。location_suggestions
location_suggestions
创建单独的迭代逻辑
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.