如何在我的 React 应用程序中导入和使用 JSON 文件中的数据？

Question

我已经在 React 中编程了几天，并且在使用 JSON 文件时遇到了一个问题。

我目前正在使用硬编码列表...

    const vendorList = [
        {
            id: 0,
            name: "Laerdal Medical Corporation",
            sections: [
                {
                    name: "Product",
                    payload: [
                        {id: 1, name: "ASL 5000 Lung Solution"},
                    ]
                },
                {
                    name: "Demos",
                    payload: [
                        {id: 1, name: "ASL 5000 Lung Solution", url: "ASL 5000 Lung Solution - High Fidelity Lungs for SimMan and SimBaby (laerdal.com)", type: "video"}
]

填充一些“供应商卡”。 我现在有一个 JSON 文件，其中包含相同的数据......

{
    "vendorList" : [
            {
                "id": 1,
                "name": "Laerdal Medical Corporation",
                "sections": [
                    {
                        "name": "Products",
                        "payload": [
                            {"id": 1, "name": "ASL 5000 Lung Solution"}
                        ]
                    },
                    {
                        "name": "Demos",
                        "payload": [
                            {"id": 1, "name": "ASL 5000 Lung Solution", "url": "ASL 5000 Lung Solution - High Fidelity Lungs for SimMan and SimBaby (laerdal.com)", "type": "video"}
                        ]
                }
            ],
            "tags": ["Tag 1","Tag 2"]
        }]

如何从我的硬编码列表更改为 JSON object？ I am able to import the JSON object after reading other stackoverflow questions using import myJson from './data.json' , but can't figure out how to put the json object in vendorlist . 谢谢你的时间！

Answer 1

从您的评论看来，JSON 正在使用

import myJson from ./data.json';

然后我假设它正在被自动解析。 （所以不需要JSON.parse ）

在此之后，只需将数据推送到vendorlist 。

vendorlist.push(...myJson.vendorList);

如果您不想改变vendorlist ，您也可以通过组合两者来创建一个新数组。

const newlist = [...vendorlist, ...myJson.vendorList];
// or
const newlist = vendorlist.concat(myJson.vendorList);