在React JS中，如何在用户界面中显示该循环中的数据

Question

我正在使用React JS。从下面的代码中，我可以在控制台中看到来自这个循环的数据，我想将数据显示到UI。我该怎么做？

这是来自api 的样本数据

{
"note": "",
"notification": "",
"Books": [
{
"bookID": 65342,
"img": "https://unsplash.com/photos/AqX_786_G0g",
"year": 2018,
"bookTitle": "Story Time",
"LibraryInfo": {
"Status": Out,
"returnDate":7 Jan        
}
},

for(const key of Object.keys(details)) {
console.log("Key",key);
}
for(const value of Object.values(details)) {
console.log("Values",value);

}
for(const entry of Object.entries(details)) {
console.log("Entries", entry);
}

Answer 1

尝试以下操作：

{
keys.map(key => (
<p> {key} </p>
))
}

Answer 2

为了循环通过Javascript对象，您可以使用Object.keys((，此函数将返回对象的键数组，因为对于您的数据集，您将有一个类似的数组

["note", "notification", "Books", ...]

一旦有了这个数组，就可以使用普通循环或一些数组实用程序方法，如map，通过括号表示法访问值。

const keys = Object.keys(myObj);
for (let i = 0; i < keys.length; i++) {
console.log(myObj[i]); // You print the associated with that key
}
// An alternative
keys.map(data => console.log(myObj[data]));

如果你想在React地图中打印它是解决你问题的好方法，你可以做一些类似的事情

{keys.map((data, i) => <p key={data + i}>{myObj[data]}</p>)}