时间戳

首页 > 解决方案 > 在 React 中安装组件后使用 fetch 动态加载 JSON 文件？

json - 在 React 中安装组件后使用 fetch 动态加载 JSON 文件？

问题描述

我在一个目录中有数百个小的 .json 文件，由于大小的原因，我无法一次将它们全部加载到内存中。因此，我想在组件安装后在 UI 中选择每个 .json 文件时单独加载它。所以我的问题很简单：有没有办法一次动态地导入这些 JSON 文件？

总结：

import '../myData/file1.json ... import '../myData/file1000.json

行不通，因为我必须输入数百次，最终结果可能会太大。不过，我很想知道您是否可以递归地将文件目录导入 React 应用程序。

我希望有这样的解决方案：

fetch('../myData/${fileNumber}.json').then(() => ...

这将允许我指定我想要加载的确切文件，但从我所看到的情况来看，尚不清楚这是可能的。

标签： jsonreactjs

解决方案

是的，您可以在 reactjs 中实现这一点。这在开发模式下有效。要使其在生产中工作，您可能需要更改 jsons 的路径。

请按照以下步骤操作：

1）在公共文件夹中创建一个文件夹myData：App/public/

2）把你所有的json文件放在那里

3）在您的组件中以这种方式使用它：

import React from 'react'

export default props => {

    const [file, setFile] = React.useState(1)

    React.useEffect(() => {
        fetch('/myData/' + file + '.json', {mode: 'no-cors'})
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error))
    },[file])

    return (
        <div>
            <div onClick={() => setFile(1)}>file 1</div>
            <div onClick={() => setFile(2)}>file 2</div>
            <div onClick={() => setFile(3)}>file 3</div>
        </div>
    )
}

推荐阅读