Состояние не обновляется правильно при получении запроса от API - PullRequest
Новая
       29

Состояние не обновляется правильно при получении запроса от API

0 голосов
/ 22 апреля 2019

Я делаю два API-запроса GET, и с обоими я хотел бы обновить состояние.По какой-то причине он обновляется только значениями из первого запроса GET.

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

axios // first get request
  .get(
    "LINK_TO_API"
  )
  .then(res => {
    this.setState({
      ...this.state.categories,
      categories: res.data.data
    });
  })
  .catch(function(error) {
    console.log(error);
  });
axios // second get request
  .get(
    "LINK_TO_API"
  )
  .then(res => {
    this.setState({
      ...this.state.categories,
      categories: res.data.data
    });
  })
  .catch(function(error) {
    console.log(error);
  });

В настоящее время я получаю 10 значений из первого запроса GET и хотел бы получить в общей сложности 20 значений при отображении по категориям.

Ответы [ 3 ]

1 голос
/ 22 апреля 2019

Вы никогда не получите 20 значений, поскольку они не добавляются, вы просто перезаписываете значения категорий в каждом вызове. 

this.setState({
  ...this.state.categories,
  categories: res.data.data
});

Здесь categories: res.data.data переписывается.

Просто измените свой код на: 

 axios
  .get(
    "LINK_TO_API"
  )
  .then(res => {
    this.setState((state) => ({
      ...state,
      categories: [...state.categories, ...res.data.data]
    }));
  })
  .catch(function(error) {
    console.log(error);
  });
0 голосов
/ 22 апреля 2019

Прежде всего, ваш оператор распространения неверен, вы должны заключить его в массив categories: [...this.state.categories, ...res.data.data]. Также я советую подождать, пока все ваши сообщения загружены, а затем установить их в состояние: 

Promise.all([axios.get('LINK_TO_API'), axios.get('LINK_TO_API_2')])
    .then(allYourPosts => {
        this.setState({ /* set it to state */ });
    })
    .catch((error) => {
        console.log(error);
    });
0 голосов
/ 22 апреля 2019

Предполагая, что категории array, вы переопределяете один массив другим массивом.

В приведенном ниже коде я всегда возвращаю новый массив и объединяю новый массив с предыдущим массивом. 

axios // first get request
  .get('LINK_TO_API')
  .then(res => {
    this.setState({
      categories: [...this.state.categories, ...res.data.data]
    });
  })
  .catch(function(error) {
    console.log(error);
  });
axios // second get request
  .get('LINK_TO_API')
  .then(res => {
    this.setState({
      categories: [...this.state.categories, ...res.data.data]
    });
  })
  .catch(function(error) {
    console.log(error);
  });
...