ReactJS Асинхронно обрабатывать локальные данные JSON

Question

У меня есть файл data.json в моей локальной рабочей среде. Приложение только на стороне клиента .

Я не уверен, что лучший (рекомендуемый) способ использования таких данных - это:

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

Или, если бы мне нужно было перенести эти данные в мой React Component с помощью GET-запроса (выборка, аксиос и т. Д.), Где я бы поместил их внутри 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

Я бы предложил использовать первый метод (импорт данных из ...) по следующим причинам:

1. Меньше идти не так. Меньше кода, меньше ошибок.
2. Устраняет CORS и другие проблемы с сетью.
3. Нет жестко закодированных URL. Они сломаются, как только вы больше не используете localhost, т.е. развернутую среду.

Answer 2

Я думаю, что первый способ лучше.

1. Второй - асинхронный процесс.Здесь вы видите только слово «асинхронный», но если вы преобразуете этот «асинхронный» объект в es5 javaScript, вы увидите, сколько там скрытого кода.Больше кода, больше процесса, больше памяти, меньше скорость.Так что первый способ лучше.
2. Что вы будете делать после развертывания приложения в реальном мире?Ты собираешься поменять все места, где ты написал localhost: 3000?

3. Значение слова «принеси» - «пойди и принеси».Ваше приложение даже не имеет серверной логики.Итак, куда вы идете из своего интерфейса?просто из одного каталога в другой?

4. Если ваш JSON-файл слишком велик, вам придется использовать серверную логику для обработки вашей базы данных.На этом этапе вы должны использовать извлекающую вещь.

Answer 3

Третий вариант - объявить ваш объект встроенным:

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 размера и т. Д.