Javascript 如何使用对象点键和数组点映射进行迭代以在组件中显示数据？

我有一个

React组件

，我试图使用

Object.keys（）

方法在中显示数据，然后尝试使用

.map（）

迭代数据

以下是

redux logger

如何打印我的数据：

body: {data: [0: {
 attributes: {
    name: "Text Widget Name",
    category: "PreBuild",
    description: "Text Widget Description",
    "chart-type": "text_widget"
 },
 type: "widget-templates"
}]}

我试图做的是迭代其中的一些。这是我的反应组件

从“道具类型”导入道具类型；
从“React”导入React；
类TextWidget扩展React.Component{
render（）{
常数{
数据
}=这是道具；
const textData=数据；
const textwidts=Object.keys（textData[0]| |[]））
.map（键=>{
返回(
{key.attributes.name}
{key.attributes.description}
);
});
返回(
{textWidgets}
)
}
}
TextWidget.propTypes={
数据：PropTypes.array
};
导出默认TextWidget
对象。键（textData[0]）
将为您提供该对象

{
    attributes: {
      name: "Text Widget Name",
      category: "PreBuild",
      description: "Text Widget Description",
      "chart-type": "text_widget"
    },
    type: "widget-templates"
  }

在迭代过程中，在您的示例中，
键
将是
属性
和
类型

Object.keys((textData[0] && textData[0].attributes) || [])    
    .map(key => {
      return (
        <div key={key.id} className="tile-head">
          <div className="title-head-content">
            <h3>{key.name}</h3>
            {key.description}
          </div>
        </div>
      );
    });

Object.keys（（textData[0]&&textData[0].attributes）| |[]））
.map（键=>{
返回(
{key.name}
{key.description}
);
});

应该这样做。还要注意，
key
没有
id
属性。
对象。key（textData[0]）
将为您提供该对象

{
    attributes: {
      name: "Text Widget Name",
      category: "PreBuild",
      description: "Text Widget Description",
      "chart-type": "text_widget"
    },
    type: "widget-templates"
  }

在迭代过程中，在您的示例中，
键
将是
属性
和
类型

Object.keys((textData[0] && textData[0].attributes) || [])    
    .map(key => {
      return (
        <div key={key.id} className="tile-head">
          <div className="title-head-content">
            <h3>{key.name}</h3>
            {key.description}
          </div>
        </div>
      );
    });

Object.keys（（textData[0]&&textData[0].attributes）| |[]））
.map（键=>{
返回(
{key.name}
{key.description}
);
});

应该这样做。还请注意，
key
没有
id
属性。
这是因为
Object.keys（textData[0]|[]）
返回两个顶级属性

key = attributes
key = type


const数据=[{
属性：{
名称：“文本小部件名称”，
类别：“预构建”，
description:“文本小部件描述”，
“图表类型”：“文本”窗口小部件
},
类型：“小部件模板”
}];
const textData=数据；
const textwidts=Object.keys（textData[0]| |[]））
.map（key=>console.log（`key=${key}`））
这是因为
Object.keys（textData[0]| |[]）
返回两个顶级属性

key = attributes
key = type


const数据=[{
属性：{
名称：“文本小部件名称”，
类别：“预构建”，
description:“文本小部件描述”，
“图表类型”：“文本”窗口小部件
},
类型：“小部件模板”
}];
const textData=数据；
const textwidts=Object.keys（textData[0]| |[]））
.map（key=>console.log（`key=${key}`））
由于数据是一个数组，而不是使用
Object.keys
可以直接映射到数据上，使其像

const textWidgets = (textData || []).map(key => {
  return (
    <div key={key.id} className="tile-head">
      <div className="title-head-content">
        <h3>{key.attributes.name}</h3>
        {key.attributes.description}
      </div>
    </div>
  );
});
 return (
    <div
      data={textData}
    >
      {textWidgets}
    </div>
 )
}

constTextWidgets=（textData | |[]）.map（key=>{
返回(
{key.attributes.name}
{key.attributes.description}
);
});
返回(
{textWidgets}
)
}
由于您的数据是一个数组，而不是使用
Object.keys
您可以直接映射到数据上，使其像

const textWidgets = (textData || []).map(key => {
  return (
    <div key={key.id} className="tile-head">
      <div className="title-head-content">
        <h3>{key.attributes.name}</h3>
        {key.attributes.description}
      </div>
    </div>
  );
});
 return (
    <div
      data={textData}
    >
      {textWidgets}
    </div>
 )
}

constTextWidgets=（textData | |[]）.map（key=>{
返回(
{key.attributes.name}
{key.attributes.description}
);
});
返回(
{textWidgets}
)
}
对象。键（textData[0]）具有值

["attributes", "type"]

要渲染数据，必须直接在textData上运行map

在您的情况下，它将是：

const textWidgets = textData.map((key, index) => {
    return (
        <div key={index} className="tile-head">
          <div className="title-head-content">
            <h3>{key.attributes.name}</h3>
            {key.attributes.description}
          </div>
        </div>
    )
});

constTextWidgets=textData.map（（键，索引）=>{
返回(
{key.attributes.name}
{key.attributes.description}
)
});
对象。键（textData[0]）具有值

["attributes", "type"]

要渲染数据，必须直接在textData上运行map

在您的情况下，它将是：

const textWidgets = textData.map((key, index) => {
    return (
        <div key={index} className="tile-head">
          <div className="title-head-content">
            <h3>{key.attributes.name}</h3>
            {key.attributes.description}
          </div>
        </div>
    )
});

constTextWidgets=textData.map（（键，索引）=>{
返回(
{key.attributes.name}
{key.attributes.description}
)
});