React-Redux TypeError: this.props.getAnimals не является функцией - PullRequest
Новая
       9

React-Redux TypeError: this.props.getAnimals не является функцией

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

При использовании реакции, редукса и thunk для извлечения некоторых данных из API возникает ошибка

TypeError: this.props.getAnimals не является функцией \

, который запускается строкой 

this.props.getAnimals();

Используя Redux Tools, мы видим, что функция this.props.getAnimals была успешно выполнена, показывая действия animals_are_loading, get_animals и animals_are_loading снова,и состояния обновляются корректно, как вы ожидаете увидеть, когда this.props.getAnimals() вызвал функцию getAnimals.

Есть идеи, что происходит?

контейнеры/Animals.js

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

class Animals extends Component {

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

    renderAnimalsList() {
        return ...
    }

    renderLoading() {
        return ...
    }

    render() {
        return (
            <div>
                <h1>Animals</h1>
                { (this.props.animalsAreLoading) ? this.renderLoading() : this.renderAnimalsList() }
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
        animals: state.animals.animals,
        animalsAreLoading: state.animals.isLoading
    }
}

function mapDispatchToProps(dispatch) {
    return {
        getAnimals
    }
}

export default connect(mapStateToProps, getAnimals)(Animals)

actions / index.js 

import axios from 'axios';
import { GET_ANIMALS_SUCCESS, ANIMALS_ARE_LOADING } from './types';

export function getAnimals() {
    return function(dispatch) {
        dispatch(animalsAreLoading(true))    // ACTION SEEN IN REDUX TOOLS
        axios
            .get(`${ROOT_URL}/animals`, {
                headers: {authorization: localStorage.getItem('token')}
            })
            .then(response => {
                console.log(response.data.animals)    // THIS RETURNS DATA!
                // ACTION SEEN IN REDUX TOOLS
                dispatch(getAnimalsSuccess(response.data.animals)) 
                // ACTION SEEN IN REDUX TOOLS
                dispatch(animalsAreLoading(false))
                return response
            })
    }
}

export function animalsAreLoading(bool) {
    return {
        type: ANIMALS_ARE_LOADING,
        payload: bool
    }
}

export function getAnimalsSuccess(animals) {
    return {
        type: GET_ANIMALS_SUCCESS,
        payload: animals
    }
}

Ответы [ 2 ]

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

Попробуйте: просто замените эту строку кодов на вашу 

function mapDispatchToProps(dispatch) {
    return ({
        getAnimals: () => dispatch(getAnimals())
    })
}

Ошибка:

Ошибка типа: this.props.getAnimals не является функцией

Это довольно ясно!Потому что после слияния return object функции mapDispatchToProps() с объектом props компонента React.Свойство getAnimals на самом деле not a function.

function mapDispatchToProps(dispatch) {
    return {
        getAnimals     // this property is properly not a function
    }
}

Чтобы исправить ошибку, я установил значение в свойство getAnimals: 

getAnimals: () => dispatch(getAnimals())

сделал его значение функцией, которая отправляет создателя действия.

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

Я думаю, что это простая mapDispatchToProps ошибка: 

export default connect(mapStateToProps, **getAnimals**)(Animals)

заменить на: 

export default connect(mapStateToProps, mapDispatchToProps)(Animals)

Вы также можете встроить mapStateToProps и mapDispatchToProps вconnect функция: 

export default connect(state => ({
  animals: state.animals.animals,
  animalsAreLoading: state.animals.isLoading 
}), { getAnimals })(Animals)
...