Javascript 在React组件中显示来自关键帧不同但值相同的对象的数据

我有一些JSON格式的数据，其中键不同，但嵌套在其中的对象有一个相同的键（在本例中，我需要一个

标题

和一个

描述

）

如何在React组件中显示此数据

我已经看到，您可以通过对象中的项进行“映射”，类似于使用

object.keys（objectName）.map（）

在数组中进行映射的方式。但是，由于下一级别的键都是唯一的，因此我不确定如何下一级别获取所需的数据

我正在处理的JSON数据如下所示：

{Object.keys(data.dataINeed).map((data) => {
  return (
    <dl>
      <dt>{data.*.title}</dt>
      <dd>{data.*.description}</dd>
    </dl>
  );
})}

const数据={
数据化：{
第一个对象：{
id:'一'，
标题：“第一个标题”，
描述：'第一个描述'，
},
第二个对象：{
id:'两个'，
标题：“第二个标题”，
描述：'第二描述'，
},
第三主题：{
id:'三'，
标题：“第三个标题”，
描述：'第三描述'，
},
},
};

React中数据的“映射”如下所示：

{Object.keys(data.dataINeed).map((data) => {
  return (
    <dl>
      <dt>{data.*.title}</dt>
      <dd>{data.*.description}</dd>
    </dl>
  );
})}

{Object.keys（data.datained）.map（（data）=>{
返回(
{data.*.title}
{data.*.description}
);
})}

这显然不起作用，因为我不能使用通配符选择器

---

关于如何获取下一级数据有什么建议吗？

在地图函数中，在每次地图调用中（

第一个对象

，

第二个对象

，等等）都会获得

键

，因此您需要通过该

键提取项目

{Object.keys(data.dataINeed).map(key => {
    const item = data.dataINeed[key];
    return (
      <dl>
        <dt>{item.title}</dt>
        <dd>{item.description}</dd>
      </dl>
    );
})}

{Object.keys（data.datained）.map（key=>{
const item=data.datained[key]；
返回(
{item.title}
{item.description}
);
})}

这是。
您可能会发现Object.entries比Object.keys更有用，请注意它是ES2017，因此您需要使用正确的transpiler预设。它将为每个条目返回一个数组，其中包含索引0处的键和索引1处的对象本身

例如：

Object.entries(dataObject).map([key, value]) 

我会给你

[
    ["firstObject": {...firstObject}],
    ["secondObject": {...secondObject}]
]

其中键不同但值相同

直接使用即可

{
  Object.values(data.dataINeed).map((data) => (
    <dl key={data.id}>
      <dt>{data.title}</dt>
      <dd>{data.description}</dd>
    </dl>
  ))
}

请检查以下代码段并参考

基本上，在地图中，您获得的是键，因此您需要使用该键访问值


const数据={
数据化：{
第一个对象：{
id:'一'，
标题：“第一个标题”，
描述：'第一个描述'，
},
第二个对象：{
id:'两个'，
标题：“第二个标题”，
描述：'第二描述'，
},
第三主题：{
id:'三'，
标题：“第三个标题”，
描述：'第三描述'，
},
},
};
常量值=Object.keys（data.datained）.map（（项）=>{
const myData=data.datained[item]；
返回(
`
<
dt>{
${myData.title}
}<
dd>{
${myData.description}
}
`
);
})
console.log（值）