Question

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

我不确定使用此类数据的最佳（建议）方法是通过以下方式之一：

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

或者如果我应该通过 GET请求（获取，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端点，而不用于本地数据吗？
如果我在这里遗漏了任何内容，请随意提出第三种方法。

Answer 1

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

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

Answer 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大小等。

Answer 3

我认为第一种方法更好。

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

ReactJS异步处理本地JSON数据

3 个答案:

对比。使用`import`

ReactJS异步处理本地JSON数据

3 个答案:

对比。使用import

对比。使用`import`