ReactJs：如何 map 和 object

Question

I get data(object) while fetching user info from API. It quite looks like,

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

here I store(JSON response) the data by using useState hook. Now I can easily access any index by typing data.id or data.name, But the problem is if I map data.xyz like that

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

it says,

TypeError: Cannot read property 'map' of undefined

I use Object.keys(data.xyz).map as this is an object but not working. How can I access/loop through xyz index?

Answer 1

How do you initialize the data? When you fetch to API, this is an async event, so probably in the first render data.xyz is undefined. Maybe you can do:

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

Let me guess you have defined data as follow:

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"
  }
}

Instead of doing this:

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"
  }
}