reactjs – 如何在react-redux中的mapDispatchToProps中调度多个

发布时间：2020-12-15 09:32:22 所属栏目：百科来源：网络整理

导读：mapDispatchToProps中有三个函数.我想在React Component的构造函数中使用它们中的任何函数,但是当我使用console.log(this.props)时,它给出了undefined如何在构造函数中使用这些函数从firebase数据库加载数据？ mapDispatchToProps const mapDispatchToProps

mapDispatchToProps中有三个函数.我想在React Component的构造函数中使用它们中的任何函数,但是当我使用console.log(this.props)时,它给出了undefined如何在构造函数中使用这些函数从firebase数据库加载数据？

mapDispatchToProps

const mapDispatchToProps = (dispatch) => {
    return {
        addProductRequest: (data) => {
            console.log(data)
            dispatch(AddNewProduct(data))
        },loadProducts: () => {
            dispatch(ViewProducts())
        },loadStores: () => {
            dispatch(ViewStores())
        },}
}

构造函数

constructor() {
    super();
    this.state = {
        products: [],stores: [],currentProduct: [],stockAvailable: [],productName: '',description: '',qty: 0,unitPrice: 0,storeName: '',selectedProduct: '',productNameInStock: '',productQtyInStock:0
    }
    console.log(this.props)

    this.props.loadProducts();
    this.props.loadStores();

    this.submit = this.submit.bind(this);
    this.inputHandler = this.inputHandler.bind(this);
}

它给出了一个错误

Uncaught TypeError: Cannot read property ‘loadProducts’ of undefined

解决方法

您将使用来自redux的bindActionCreators,f.e.：

const mapDispatchToProps = (dispatch) => {
    return {
        ...bindActionCreators({ loadProducts,loadStores },dispatch)
    }
}

在这种情况下,您将能够通过组件中的this.props.loadProducts()创建操作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!