目前我有一些格式為
data : {
full_name: 'John Doe',
date_of_birth: '01-01-1990'
}
我想以表格格式呈現它，看起來像
Full Name : John Doe
Date Of Birth: 01-01-1990
如果它是一個陣列，我可以像這樣
data.map((item) => <h1>item</h1>
但我還需要列印密鑰。
我如何在類似函式的單個回圈中實作這樣的功能？可以在陣列的情況下使用地圖，但我還需要渲染物件的關鍵部分。
注意：資料物件不能更改。
uj5u.com熱心網友回復：
您可以映射條目陣列，如下所示：
Object.entries(data).map((entry, index) => (
<div key={index}>{entry[0]}: {entry[1]}</div>
));
該Object.entries函式[key, value]從函式的條目創建一個陣列陣列。
此外，您可以使用一個函式將密鑰從轉換snake_case為可讀格式。這是一個執行此轉換的單行函式：
const snakeToText = (str) => str.split('_').map((word) => word[0].toUpperCase() word.substring(1)).join(' ');
uj5u.com熱心網友回復：
您需要將資料轉換為Object.entries或Object.values。
1)使用Object.keys
<div>
{Object.keys(obj.data).map((key) => {
return (
<div> {key} - {obj.data[key]} </div>
);
})}
</div>
2)使用Object.entries
<div>
{Object.entries(obj.data).map(([key, value]) => {
return (
<div>
{key} - {value}
</div>
);
})}
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344928.html
標籤：javascript 反应