выборка JSON в отдельном компоненте - PullRequest
Новая
       11

выборка JSON в отдельном компоненте

0 голосов
/ 26 февраля 2019

Я создал приложение и хочу добавить больше компонентов, которые будут использовать тот же самый json, который я выбрал в "personlist.js", поэтому я не хочу использовать fetch () в каждом из них, я хочу сделатьотдельный компонент, который выполняет только выборку, и вызывает его в других компонентах, за которым следует функция отображения в каждом из компонентов, как сделать компонент выборки только?

вот мой метод выборки: 

componentDidMount() {
    fetch("data.json")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            isLoaded: true,
            items: result.results
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

и вот фрагмент песочницы https://codesandbox.io/s/1437lxk433?fontsize=14&moduleview=1

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Не уверен, что это ответ, который вы ищете.

fetchDataFunc.js 

export default () => fetch("data.json").then(res => res.json())

Component.js 

import fetchDataFunc from './fetchDataFunc.'

class Component {
  state = {
    // Whatever that state is
  }

  componentDidMount() {
    fetchFunc()
      .then(res => setState({ 
        // whatever state you want to set
      }) 
      .catch(err => // handle error)
  }
}

Component2.js 

import fetchDataFunc from './fetchDataFunc.'

class Component2 {
  state = {
    // Whatever that state is
  }

  componentDidMount() {
    fetchFunc()
      .then(res => setState({ 
        // whatever state you want to set
      }) 
      .catch(err => // handle error)
  }
}

Вы также можете иметь HOC, который делаетизвлекает данные один раз и разделяет их между различными компонентами.

0 голосов
/ 26 февраля 2019

Я не понимаю, почему это должен быть компонент, а не просто функция, которую используют другие компоненты.

Но если вы хотите, чтобы это был компонент, который используют другие компоненты, имейте ихпередайте ей функцию сопоставления для использования в качестве реквизита, а затем используйте ее в componentDidMount, когда вы вернете элементы обратно, и отобразите сопоставленные элементы в render.

в комментарии, который вы 'Я уточнил:

Я пытаюсь получить JSON один раз, и я не уверен, что лучший способ сделать это.

В этом случае я бы не использовал компонент.Я бы поместил вызов в модуль и попросил бы модуль представить обещание: 

export default const dataPromise = fetch("data.json")
    .then(res => {
        if (!res.ok) {
            throw new Error("HTTP status " + res.status);
        }
        return res.json();
    });

Код с использованием обещания будет выглядеть следующим образом: 

import dataPromise from "./the-module.js";
// ...
componentDidMount() {
    dataPromise.then(
        data => {
            // ...use the data...
        },
        error => {
            // ...set error state...
        }
    );
}

Данные выбираются один раз, при загрузке модуля, а затем каждый компонент может использовать его.Важно, чтобы модули обрабатывали данные только для чтения.(Возможно, вы захотите, чтобы модуль экспортировал функцию, которая делает защитную копию.)

...