如何在返回部分的功能组件中显示键和值

Question

我试图在屏幕上逐个显示所有对象值。我正在获取未定义的映射函数示例数据数组。为了设置阵列，我正在使用挂钩

{ 
first: 5
second: 6
StrtDt: "2019-03-06"
seconds: 80
days: 7
mins: 1
}

const [attributesCodes, setattributesCodes] = React.useState({});
setattributesCodes(sampledataArray);

预期屏幕

<div>
<label>first : </label><label>5</label>
<label>second : </label><label>5</label>
<label>StrtDt : </label><label>2019-03-06</label>
<label>seconds : </label><label>8</label>
</div>

我尝试了下面的代码，但它在地图中显示问题

return (
<div>
{attributesCodes.map((data, index) => (
<label>index : </label><label>data</label>
))}

</div>
)

Answer 1

return (
<div>
{Object.keys(attributesCodes).map((key) => (
<label>{key} : </label><label>attributesCodes[key]</label>
))}

</div>
)

请尝试使用这种方法

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

Answer 2

它抛出错误，因为attributesCodes是一个对象。使用例如Object.entries，然后在其上进行映射。

{Object.entries(attributesCodes).map(([key, value], index) => (
<label key={index}>{key}: {value}</label>
))}

Answer 3

您无法跨对象进行映射，因此您需要将attributesCodes定义为数组，或者使用object.keys、object.values或object.entries访问对象。

return (
<div>
{Object.keys(attributesCodes).map(key => (
<label>{key} : </label><label>attributesCodes[key]</label>
))}  
</div>
)