Javascript ReactJs：如何映射对象

我从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

hook存储（JSON响应）数据。现在我可以通过键入data.id或data.name轻松访问任何索引，但问题是如果我像那样映射data.xyz

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

上面说,

TypeError: Cannot read property 'map' of undefined

---

我使用

Object.keys（data.xyz）.map

，因为这是一个对象，但不起作用。如何通过xyz索引进行访问/循环？

让我猜您已经定义了如下数据：

class-SomeClass{
数据：{
“id”：“1111”，
“名称”：“abcd”，
“xyz”：[
{
“a”：“a”，
“b”：“b”，
“c”：“c”
},
{
“a”：“e”，
“b”：“f”，
“c”：“g”
}
],
“电子邮件”：abc@xyz.com",
“电话”：“0123456789”
}
}

而不是这样做：

class-SomeClass{
数据={
“id”：“1111”，
“名称”：“abcd”，
“xyz”：[
{
“a”：“a”，
“b”：“b”，
“c”：“c”
},
{
“a”：“e”，
“b”：“f”，
“c”：“g”
}
],
“电子邮件”：abc@xyz.com",
“电话”：“0123456789”
}
}

让我猜您对数据的定义如下：

class-SomeClass{
数据：{
“id”：“1111”，
“名称”：“abcd”，
“xyz”：[
{
“a”：“a”，
“b”：“b”，
“c”：“c”
},
{
“a”：“e”，
“b”：“f”，
“c”：“g”
}
],
“电子邮件”：abc@xyz.com",
“电话”：“0123456789”
}
}

而不是这样做：

class-SomeClass{
数据={
“id”：“1111”，
“名称”：“abcd”，
“xyz”：[
{
“a”：“a”，
“b”：“b”，
“c”：“c”
},
{
“a”：“e”，
“b”：“f”，
“c”：“g”
}
],
“电子邮件”：abc@xyz.com",
“电话”：“0123456789”
}
}

如何初始化数据？ 在获取API时，这是一个异步事件，因此可能在第一次渲染时data.xyz未定义。 也许你可以：

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

---

如何初始化数据？ 在获取API时，这是一个异步事件，因此可能在第一次渲染时data.xyz未定义。 也许你可以：

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

let数据={
id:“1111”，
名称：“abcd”，
xyz：[
{
a:“a”，
b:“b”，
c:“c”，
},
{
a:“e”，
b：“f”，
c：“g”，
},
],
电子邮件：“abc@xyz.com",
电话：0123456789，
};
设xyz=data.xyz.map（（xyz，索引）=>{
console.log（xyz）；
返回xyz；
});
log（“XYZ==>”，XYZ）
let数据={
id:“1111”，
名称：“abcd”，
xyz：[
{
a:“a”，
b:“b”，
c:“c”，
},
{
a:“e”，
b：“f”，
c：“g”，
},
],
电子邮件：“abc@xyz.com",
电话：0123456789，
};
设xyz=data.xyz.map（（xyz，索引）=>{
console.log（xyz）；
返回xyz；
});
log（“XYZ==>”，XYZ）另一个当您将定义与声明弄错时，您需要发布更多代码、如何设置以及如何访问xyz数组，然后您可以得到更好的解决方案。您可以访问一个属性，但不能访问另一个。这可能是因为xyz属性在主对象中不存在，或者它不是数组。@Vivek我已经解释了如何存储该数据。我使用
useState
Hook-like
const[data，setdata]=useState（[]）
来定义它，并在获取use
setdata（json）
后进行存储。另一种方法是，当定义与声明错误时，需要发布更多代码、如何设置以及如何访问xyz数组，然后可以得到更好的解决方案。您可以访问一个属性，但不能访问另一个。这可能是因为xyz属性在主对象中不存在，或者它不是数组。@Vivek我已经解释了如何存储该数据。我使用
useState
Hook-like
const[data，setdata]=useState（[]）
来定义它，并在获取后使用
setdata（json）
来存储。实际上，我从API获取所有数据，而不仅仅是xyz。定义状态，如
const[data，setdata]=useState（{}）
，然后通过
setdata
赋值
useState（{xyz:[]}）
无法执行任何操作因为您不知道数组是否存在，您可以检查是否存在。。。data.xyz&&data.xyz.map（（项，索引）=>（））实际上，我从API获取所有数据，而不仅仅是xyz。定义状态，如
const[data，setdata]=useState（{}）
，然后通过
setdata
赋值
useState（{xyz:[]}）
无法执行任何操作因为您不知道数组是否存在，您可以检查是否存在。。。data.xyz&&data.xyz.map（（项，索引）=>（））