如何修复：“TypeError: fetchProducts 不是函数”

Question

我正在尝试使用 redux 存储从 API 中检索一组产品。

为了实现这一点，我创建了 actions 和 reducers，一个 functionmapStateToProps()和一个 function mapDispatchToProps()，后者包含一个 function fetchProducts()，它在动作文件中定义并且在调用时应该检索产品列表。

所有这些都是通过以下方式完成的：

这是概览组件，它应该渲染数据（实际渲染被省略了，因为它不影响这个问题）：

import React, {Component} from 'react';

import {connect} from 'react-redux';

import PropTypes from 'prop-types'

import fetchProductsAction from '../actions/ProductFetchingActionFile'

import {bindActionCreators} from 'redux';

export class Overview extends Component {

    constructor(props) {

        super(props);

    }

    componentDidMount() {

        this.props.fetchProducts();

    }

    render() {

        return(

                  <h1>test</h1>

        )

    }

}

const mapStateToProps = state => ({

    error: state.rootReducer.productsReducer.error,

    products: state.rootReducer.productsReducer.products,

    pending: state.rootReducer.productsReducer.pending,

})

const mapDispatchToProps = dispatch => bindActionCreators({

    fetchProducts: fetchProductsAction 

}, dispatch)

Overview.propTypes = {

    fetchProducts: PropTypes.func

}

export default connect(mapStateToProps, mapDispatchToProps)(Overview);

这是操作文件 (ProductFetchingActionFile)：

import {

    PREFIX,

    FETCH_PRODUCTS_PENDING,

    FETCH_PRODUCTS_SUCCESS,

    FETCH_PRODUCTS_ERROR

} from "./types";

function fetchProductsPending() {

    return{

        type: FETCH_PRODUCTS_PENDING

    }

}

function fetchProductsSuccess(products) {

    return{

        type: FETCH_PRODUCTS_SUCCESS,

        products: products

    }

}

function fetchProductsError(error) {

    return{

        type: FETCH_PRODUCTS_ERROR,

        error: error

    }

}

Answer 1

试试这个&nbsp; &nbsp;const mapDispatchToProps = dispatch => {&nbsp; &nbsp; &nbsp; &nbsp;fetchProducts : () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dispatch(fethcProducts())&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp;}

Answer 2

您正在将您的操作导入为import&nbsp;fetchProductsAction&nbsp;from&nbsp;'../actions/ProductFetchingActionFile'当它看起来没有作为默认值导出时。大概应该是：import&nbsp;{&nbsp;fetchProductsAction&nbsp;}&nbsp;from&nbsp;'../actions/ProductFetchingActionFile'