ReactJs：如何 map 和 object

Question

我從 API 獲取用戶信息時獲取數據（對象）。 很像，

{
    "id":"1111",
    "name":"abcd",
    "xyz":[
        {
            "a":"a",
            "b":"b",
            "c":"c"
        },
        {
            "a":"e",
            "b":"f",
            "c":"g"
        }
    ],
    "email":"abc@xyz.com",
    "phone":"0123456789"
}

在這里，我使用useState掛鈎存儲（JSON 響應）數據。 現在我可以通過輸入 data.id 或 data.name 輕松訪問任何索引，但問題是如果我像這樣的 map data.xyz

(data.xyz).map((xyz,index) => (//something)

它說，

TypeError: Cannot read property 'map' of undefined

我使用Object.keys(data.xyz).map因為這是一個 object 但不起作用。 如何訪問/循環通過 xyz 索引？

Answer 1

如何初始化數據？ 當您獲取到 API 時，這是一個異步事件，因此可能在第一次渲染中 data.xyz 未定義。 也許你可以這樣做：

const [data, setData] = useState({ xyz: [] });

Answer 2

 let data = { id: "1111", name: "abcd", xyz: [ { a: "a", b: "b", c: "c", }, { a: "e", b: "f", c: "g", }, ], email: "abc@xyz.com", phone: "0123456789", }; let xyz = data.xyz.map((xyz, index) => { console.log(xyz); return xyz; }); console.log("XYZ ==>", xyz);

Answer 3

讓我猜你定義的數據如下：

class SomeClass {
  data: {
    "id":"1111",
    "name":"abcd",
    "xyz":[
        {
            "a":"a",
            "b":"b",
            "c":"c"
        },
        {
            "a":"e",
            "b":"f",
            "c":"g"
        }
    ],
    "email":"abc@xyz.com",
    "phone":"0123456789"
  }
}

而不是這樣做：

class SomeClass {
  data = {
    "id":"1111",
    "name":"abcd",
    "xyz":[
        {
            "a":"a",
            "b":"b",
            "c":"c"
        },
        {
            "a":"e",
            "b":"f",
            "c":"g"
        }
    ],
    "email":"abc@xyz.com",
    "phone":"0123456789"
  }
}