установка состояния внутри контекста реакции с ответом axios - PullRequest
Новая
       5

установка состояния внутри контекста реакции с ответом axios

0 голосов
/ 29 сентября 2018

У меня есть запрос http get, который возвращает json.Я хочу сохранить этот ответ в переменной состояния.Это в context.js: 

switch(action.type) {
        case 'BUSCAR_LIBRO':
            return {
                ...state,
                respuestaJson: axios.get('https://www.googleapis.com/books/v1/volumes?q=' + action.payload.split(' ').join('+'))
                .then(response => {})
            }
        default:
            return state;
    }

Значение respuestaJson, которое я получаю, - обещание {}

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

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

import React, { PureComponent, createContext } from 'react';
import axios from 'axios';

const getDefaultContext = () => ({
  books: null,
  fetchBooks: () => {},
})

const Context = createContext(getDefaultContext());

class BookProvider extends PureComponent {
  constructor(props) {
    super(props);

   this.fetchBooks = this.fetchBooks.bind(this);

    this.state = {
      books: null,
      fetchBooks: this.fetchBooks,
    };
  }

  fetchBooks() {
    axios
      .get('http://something')
      .then(response => {
        this.setState(prevState => { ...prevState, books: response.books });
      });
  }

  render() {
    const { children } = this.props;

    return (
      <Context.Provider context={this.state}>
        {children}
      </Context.Provider>
    );
  }
}

А потом, у некоторых из ваших детей: 

<Context.Consumer>
  {context => <Button onClick={context.fetchBooks}>Load books</Button>}
</Context.Consumer>

Но ваш код действительно не похож на васиспользуя контекстный API ...

0 голосов
/ 29 сентября 2018

Вы, вероятно, прямо сейчас оборачиваете все в setState. 

someMethod = () => {
  this.setState(state => {
    ...YOUR CURRENT CODE
  })
}

Нужно вызвать api, а после обновления 

someMethod = () => {
 switch (action.type) {
  case 'BUSCAR_LIBRO':
    axios.get('https://www.googleapis.com/books/v1/volumes?q=' + action.payload.split(' ').join('+'))
    .then(res => {this.setState(...UPDATE)});
  default:
    return null;
 }
}
...