Question

在使用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
    }
}

Answer 1

我认为这是一个简单的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)

Answer 2

尝试一下：只需将这些代码替换为您的代码

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

错误：

TypeError：this.props.getAnimals不是函数

这很清楚！因为在将return object函数的mapDispatchToProps()合并到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不是函数

2 个答案: