时间戳

首页 > 解决方案 > 如何在我的 React 应用程序中导入和使用 JSON 文件中的数据？

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

问题描述

我已经在 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 对象？在使用 阅读其他 stackoverflow 问题后，我能够导入 JSON 对象import myJson from './data.json'，但无法弄清楚如何将 json 对象放入vendorlist. 谢谢你的时间！

标签： javascriptjsonreactjslist

解决方案

从您的评论看来，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);

推荐阅读