Javascript React-Redux类型错误：this.props.getAnimals不是函数

当使用react、redux和thunk从API获取一些数据时，我遇到了一个错误

TypeError:this.props.getAnimals不是函数\

这是由该行触发的

this.props.getAnimals();

使用Redux工具，我们可以看到

this.props.getAnimals

函数已成功执行，显示了

动物正在加载

、

获取动物

和

动物正在加载

，并且状态正在正确更新，这是

this.props.getAnimals（）时您将看到的情况

调用了函数

getAnimals

知道发生了什么吗

容器/动物.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)

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
    }
}

---

我认为这是一个简单的

mapDispatchToProps

错误：

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

替换为：

export default connect(mapStateToProps, mapDispatchToProps)(Animals)

---

您还可以在

connect

功能中内联

MapStateTrops

和

mapDispatchToProps

：

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

---

试试这个：用你的代码替换这些代码行

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

错误：

TypeError:this.props.getAnimals不是函数

这很清楚！因为在将

mapDispatchToProps（）

函数的

return对象

合并到React组件的

props

对象之后。

getAnimals

属性实际上不是函数

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

我修复错误的方法是将值设置为

getanives

属性：

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

使其值成为分派动作创建者的函数