在對象上循環 // 錯誤：對象作為 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創建單獨的迭代邏輯