遍历JSON对象并将它们转换为React组件

Question

我有一个JSON文件，里面有三个不同的对象(card1、card2和card3(。我想在JavaScript中循环这些对象，将它们变成对象的array，然后在我的React代码中，我试图将它们变成组件，这取决于JSON文件中有多少。

到目前为止我所拥有的：

import Card from "./card-elements/Card";
import json from "./data.json";
const list = [];
for (const key in json) {
if (json.hasOwnProperty(key)) {
list.push(key);
}
}
function App() {
return (
<div className="card-area">
{list.map(i => {
return <Card title={i.title}
description={i.description}
borderColor={"red"}/>
})}
</div>
);
}
export default App;

data.json:

{
"card1": {
"title": "Card One",
"description": "This is card one's description. Straight from JSON file!"
},
"card2": {
"title": "Card Two",
"description": "Directly from the JSON file, this is card two's description"
},
"card3": {
"title": "Card Three",
"description": "And finally, this is the last cards description!"
}
}

电流输出：我的React没有出现错误，它只显示一个组件；标题"；以及"；描述"；没有显示

任何帮助都将不胜感激，谢谢！

Answer 1

不需要将每个项目推送到list并使用它。而不是使用Object.entries。

试试这个

function App() {
return (
<div className="card-area">
{(Object.entries(json) || []).map(([key, value]) => {
return (
<Card
title={value.title}
description={value.description}
borderColor={"red"}
/>
);
})}
</div>
);
}

Answer 2

在React中，您应该使用useState钩子来更新组件。

Try something like:
import Card from "./card-elements/Card";
import json from "./data.json";

function App() {
const [cardData, setCardData] = React.useState();
React.useEffect(() => {
const list = [];
for (const key in json) {
if (json.hasOwnProperty(key)) {
list.push(key);
}
}
}, [])
return (
<div className="card-area">
{cardData && list.map(i => {
return <Card title={i.title}
description={i.description}
borderColor={"red"}/>
})}
</div>
);
}

导出默认应用程序；