Правильный способ включения списков и других внешних данных в приложение TypeScript React

Question

Я создал приложение React, используя пакет npm create-Reaction-app. Все работает нормально, однако я не уверен, как обращаться с внешними файлами.

Я создал POC, который содержит объект json для записей в поле выбора. Я могу импортировать объект, и он работает правильно. Однако я привык иметь такие файлы на сервере, чтобы их можно было редактировать, не перестраивая программу.

Я преобразовал файл в формат .json и смог импортировать его без проблем. Однако, если я попытаюсь переместить его в папку «public», я больше не смогу его импортировать. Если он остается в папке src, он включается в комплект, и я не могу редактировать его напрямую.

Является ли включение файла в комплект стандартным способом обработки данных, которые могут измениться (будь то обновление или i18n) ??? Если нет, то как мне настроить приложение, чтобы разрешить мне импортировать его из общей папки после его развертывания?

Answer 1

Это должно работать:

Добавьте data.json в public директорию и используйте fetch в componentDidMount

componentDidMount() {
  fetch('data.json').then(data => {
    data.json().then(response => {
      console.log(response)
      this.setState({ data }); // you can set data to state
     });
  })
}

содержание data.json

{
  "data": "some data"
}

Если вы пытаетесь использовать некоторые внешние данные, например, с сервера вы не должны import это, как любые другие файлы (т.е. import a.js from './a'), вы должны сделать HTTP-запрос для получения этих данных