reactjs: Как загрузить json данные локально?

Question

Я пишу скрипт для отображения json данных, в настоящее время загружаю данные как runtimeload. Как изменить код, чтобы он загружался как локально? Не могли бы вы посмотреть? Спасибо! Я хочу создать свой сценарий как библиотеку и файлы сборки json и не позволять другим изменять эти данные.

Ошибка, как показано ниже:

./src/components.js
Module not found: You attempted to import ../data/a.json which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

type State = {
  index: number;
};

type Props = {
 Duration: number;
 Size: number;
 serviceData: typeof service;
};

export class DataFile extends React.Component<Props, State> {
  timerID: number;

  constructor(props: Props) {
    super(props);
    this.state = {
      index: 0,
      testData: this.data(),
    };
    this.timerID=0;
  }

  getData =()=> {
    switch (this.props.serviceData) {
      case service["test_a"] :
        return require('../data/a.json');

      case service["test_b"] :
        return require('../data/b.json');

      case service["test_c"] :
        return require('../data/c.json');

      default:
        return require('../data/c.json');
    }
  }

Answer 1

Вы должны манипулировать объектом JS в своем коде, чтобы сгенерировать JSON и преобразовать его в строку JSON, когда вы хотите, чтобы он отображался.

В конце концов, вы можете использовать LocalStorage , доступный в большинстве браузеров, чтобы сохранить сгенерированный JSObject для строкового преобразования.

Надеюсь, это поможет