React-Redux TypeError: this.props.getAnimals is not a function

Question

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

TypeError: this.props.getAnimals is not a function\

由行

触发

this.props.getAnimals();

使用Redux Tools，我们可以看到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
    }
}

Answer 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)

Answer 2

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

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

错误：

TypeError: this.props.getAnimals is not a function

很清楚了！因为将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())

使它的值成为一个函数来调度一个动作创建者。

React-Redux TypeError: this.props.getAnimals is not a function

React-Redux TypeError: this.props.getAnimals is not a function

javascript

reactjs

redux

redux-thunk

react-redux