установка состояния в axios.get (url) .then () не работает при использовании реагирования - PullRequest
Новая
       17

установка состояния в axios.get (url) .then () не работает при использовании реагирования

1 голос
/ 25 июня 2019

При работе с Реагирует и Redux Я столкнулся с этим интересным наблюдением. 

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchBooks} from '../actions'

class Sample extends Component {

    componentDidMount() {
        /* Fetching from server */
    }

    render(){
        return(
            {this.props.books.map(book => <Book key={book.title} {...book} />)}
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({fetchBooks}, dispatch);
}

const mapStateToProps = ({books}) => {
    return {books};
}

connect(mapStateToProps, mapDispatchToProps)(Sample)

Когда я реализую функцию componentDidMount() с избыточным значением 

...
componentDidMount() {
    this.props.fetchBooks();
}
...

состояние обновляется и вызывается функция рендеринга.

Однако, когда я использую axios с обещанием, он не работает: 

import axios from 'axios';
...
componentDidMount() {
    const self = this;
    axios.get(__URL__)
        .then((response) => {
            self.setState({books: response.data});
        });
}
...
  1. это означает, что вы не можете смешивать два способа установки состояния при использовании redux?
  2. Или почему один метод работает, а другой не работает, когда используется redux ?

1 Ответ

0 голосов
/ 25 июня 2019

Ну, вы пропустили беспорядок с состоянием component и redux. при вызове функции диспетчеризации с использованием приставки: 

componentDidMount() {
  this.props.fetchBooks();
}

Отправляет обновленную функцию действия и состояние избыточности. Извлечение состояния избыточности из подпорки компонента путем передачи первого аргумента в 

connect(mapStateToProps, mapDispatchToProps)(Sample)

когда вы вызываете setState после получения ответа axios, он обновляет ваше состояние component, а не redux. Таким образом, в этом случае вы можете найти ваши данные из this.state.books, а не this.props.books. Если вам нужно отправить функцию действия, когда axios получит ответ. 

componentDidMount() {
  const self = this;
  axios.get(__URL__)
    .then((response) => {
        //self.setState({books: response.data});
        self.props.yourDispatchFunctionWithPassingTheReponseData(response.data);
    });
}

Более подробную информацию о доставке, пожалуйста, проверьте ссылку

...