ReactJS 异步处理本地 JSON 数据答案

【问题标题】：ReactJS Handle local JSON data AsynchronouslyReactJS 异步处理本地 JSON 数据
【发布时间】：2019-09-04 06:05:24
【问题描述】：

我的本地工作区环境中有一个data.json 文件。该应用仅限客户端。

我不确定使用此类数据的最佳（建议）方式是否是：

import data from './data.json'
// and got to town on it...

或者，如果我应该通过 GET 请求（fetch、axios 等）将这些数据带入我的 React 组件，我会将其放置在 componentDidMount 中


async componentDidMount() {
    const data = 'http://localhost:3000/data.json'
    try {
      const res = await fetch(data)
      this.setState({res})

    }
    catch (error) {
      console.error(error)
    }
  }

解决此问题的正确方法和最佳实践是什么？
CRUD 请求是否应该仅用于外部 https 端点，而不是像我的示例那样用于本地数据？
如果我在这里遗漏了什么，请随时提出第三种方法。

【问题讨论】：

第三个选项是声明你的对象内联，我觉得import和inline是一样的，但是为了可读性，我会选择import。
没有关注你。你能给我举个例子吗？
stackoverflow.com/questions/31758081/…
您不能使用 http 请求...没有服务器可以响应该请求...只需导入...
答案取决于用例。也许是动态配置什么的。需要更多说明

标签： javascript reactjs ecmascript-6

【解决方案1】：

我建议使用第一种方法（从...导入数据），原因如下：

少出错。更少的代码，更少的错误。
消除了 CORS 和其他网络问题。
没有硬编码的网址。一旦您不再使用 localhost（即已部署的环境），这些就会中断。

【讨论】：

【解决方案2】：

第三个选项是内联声明你的对象：

import React, { useState } from 'react';

const algorithmTemplate = {
  "name": "",
  "description": "",
  "nodes": [
    {
      "nodeName": "",
      "algorithmName": "",
      "input": []
    }
  ]
}

export default function AddAlgorithm() {
  const [formData, setFormData] = useState(algorithmTemplate);

  return (...)
}

对比使用`import`

import React, { useState } from 'react';
import algorithmTemplate from 'config/algorithm.template.json';

export default function AddAlgorithm() {
  const [formData, setFormData] = useState(algorithmTemplate);

  return (...)
}

我会选择可读性，这取决于您的JSON 大小等。

【讨论】：

【解决方案3】：

我认为第一种方式更好。

第二个是异步进程。在这里你只看到“异步”这个词，但是如果你把那个“异步”的东西转换成 es5 javaScript，你会看到有多少隐藏的代码。更多代码，更多进程，更多内存使用，更少速度。所以第一种方法更好。
将应用程序部署到现实世界后，您会做什么？你要改变你写 localhost:3000 的所有地方吗？
“获取”这个词的意思是“去寻找然后带回来”。您的应用程序甚至没有服务器端逻辑。那么你从前端去哪里？只是从一个目录到另一个目录？
如果您的 JSON 文件太大，那么您必须使用服务器端逻辑来处理您的数据库。此时，你必须使用一个获取的东西。

【讨论】：

对比使用import

对比使用`import`