循环遍历JSON对象并将其转换为React组件

Question

我有一个JSON文件，里面有3个不同的对象（card1、card2和card3）。我想在JavaScript中循环遍历这些对象，将它们转化为对象的数组，然后在我的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;

数据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!"
    }
}

当前输出：我的反应没有出现错误，它只显示一个组件，并且“标题”和“描述”不显示

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

Answer 1

无需使用将每个项目推送到列表并使用它。而不是使用对象。条目。

像这样试试

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