Question

我需要从https://s3.eu-central-1.amazonaws.com/easy-client-assets/HomeView.json加载我的数据文件并在我的组件中使用它。

类似的东西：

import Data from 'https://s3.eu-central-1.amazonaws.com/easy-client-assets/HomeView.json'

任何想法我怎么能这样做？

Answer 1

您可以使用加载程序并将其配置为在webpack中使用。使用webpack＆gt; = 2.0.0，您不需要加载程序。 Webpack将自动处理导入。这是加载程序模块的link。

Answer 2

请尝试这个以便您理解。

xyz.json

//单个数据 [{年龄：21}]

//多个数据 [{年龄：24}，{年龄：35}，{年龄：25}]

import data from '../components/xyz.json';

Const parsedJson = JSON.parse(data);
// accessing single data
Console.log(parsedJson.age);

// accessing multiple data in JSON
Console.log(parsedJson[0].age);
Console.log(parsedJson[1].age);

// convert Json to string
Console.log(JSON.stringify(parsedJson));

我希望它会给你一些想法。

Answer 3

如果没有某种网络包插件，您将无法使用导入语句引用 S3 文件。导入仅适用于本地文件。

我最近解决了一个类似的情况，我想使用 s3 来托管配置文件。

我使用 useEffect 钩子和 fetch 从 URL 加载文件解决了这个问题。对于本地开发，我使用 serve 来托管本地版本，确切的 url 是 .env 配置值（并使用 dot-env 来处理不同的构建环境）。

（注意，我几乎只使用函数式反应组件。您可以将其转换为类组件并使用 componentDidMount）

  const [data, setData] = useState([]);

  useEffect(()=>{
    fetch(process.env.REACT_APP_CONFIG_URL)
  .then(response => response.json())
  .then((jsonData) => {
    // jsonData is parsed json object received from url
    setData(jsonData)
  })
  .catch((error) => {
    // handle your errors here
    console.error(error)
  })
  },[]) //empty array to get `componentDidMount` only and not have the `useEffect` fire on `componentDidUpdate`

这使数据进入反应状态，并使用缓存头限制用户获取配置文件的频率。

至于webpack插件，这个是有的，但我没用过https://github.com/egoist/import-http

将S3存储桶中的JSON文件加载到React组件

3 个答案: