React-Redux TypeError：this.props.getAnimals 不是函数答案

【问题标题】：React-Redux TypeError: this.props.getAnimals is not a functionReact-Redux TypeError：this.props.getAnimals 不是函数
【发布时间】：2018-09-28 01:18:27
【问题描述】：

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

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

由线路触发

this.props.getAnimals();

使用 Redux 工具，我们可以看到 this.props.getAnimals 函数已成功执行，再次显示操作 animals_are_loading、get_animals 和 animals_are_loading，并且状态正在正确更新，正如您所期望的那样查看this.props.getAnimals() 何时调用了函数getAnimals。

知道发生了什么吗？

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

【问题讨论】：

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

我认为这是一个简单的mapDispatchToProps 错误：

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

替换为：

export default connect(mapStateToProps, mapDispatchToProps)(Animals)

您还可以在connect 函数中内联mapStateToProps 和mapDispatchToProps：

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

【讨论】：

【解决方案2】：

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

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

错误：

TypeError: this.props.getAnimals 不是函数

这很清楚！因为在将mapDispatchToProps()函数的return object合并到React组件的props对象之后。 getAnimals 属性实际上是 not a function。

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

我为修复错误所做的是将值设置为 getAnimals 属性：

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

让它的值变成一个派发动作创建者的函数。

【讨论】：