Redux-错误:mergeProps的类型对象的值无效 [英] Redux - Error: Invalid value of type object for mergeProps

问题描述

我遇到了使删除调度事件起作用的问题.我正在尝试从状态中删除列表项.

I am having issues getting a delete dispatch event to work. I am trying to remove a list item from state.

我得到的错误如下:

Error: Invalid value of type object for mergeProps argument when connecting 
component Invoices.

我是redux的新手，并尝试了各种不同的方法.

I am new to redux and have tried various different approaches.

据我所知，Redux在Invoices.js的以下几行中引发了错误

From what I can tell, Redux is throwing an error in the following lines on Invoices.js

export default connect(
mapStateToProps,
mapDispatchToProps,
{ getInvoices }
)(Invoices);

如果我取出 mapDispatchToProps ，则错误将停止，但是显然我不能使用此方法.我尝试设置另一个参数null，以防它期望mergeProps参数(即使它是可选的)，如下所示:

If I take out mapDispatchToProps, then the error will stop, however obviously then I cannot use this method. I have tried setting another argument of null, in case it was expecting a mergeProps argument (even though it's optional), as per the below:

export default connect(
mapStateToProps,
mapDispatchToProps,
null,
{ getInvoices }
)(Invoices);

但是，我似乎无法解决这个错误.

However, I cannot seem to get around this error.

注意:一切正常，只有当我引入mapDispatchToProps/delete dispatch时，我才遇到此错误.

Note: Everything is working fine, it's only when I introduced the mapDispatchToProps / delete dispatch I ran into this error.

我有以下文件:

//Invoices.js
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../common/Spinner";
import InvoiceItem from "./InvoiceItem";
import { getInvoices, deleteInvoice } from "../../actions/invoiceActions";

class Invoices extends Component {
componentDidMount() {
this.props.getInvoices();
}

render() {
const { invoices, loading } = this.props.invoice;
let invoiceItems;

if (invoices === null || loading) {
  invoiceItems = <Spinner />;
} else {
  if (invoices.invoices.length > 0) {
    invoiceItems = invoices.invoices.map(invoice => (
      <InvoiceItem
        key={invoice.Id}
        invoice={invoice}
        delete={this.props.delete}
      />
    ));
  } else {
    invoiceItems = <h4>No invoices found...</h4>;
  }
  }

  return (
  <div className="profiles">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Invoices</h1>
          {invoiceItems}
        </div>
      </div>
    </div>
  </div>
  );
 }
}

Invoices.propTypes = {
getInvoices: PropTypes.func.isRequired,
deleteInvoice: PropTypes.func,
invoice: PropTypes.object.isRequired
};

const mapStateToProps = state => {
 return {
  invoice: state.invoices
 };
};

const mapDispatchToProps = dispatch => {
  return {
   deleteInvoice: invoice => dispatch(deleteInvoice.deleteInvoice(invoice))
  };
};

export default connect(
mapStateToProps,
mapDispatchToProps,
{ getInvoices }
)(Invoices);

.

// InvoiceItem.js
import React, { Component } from "react";
import PropTypes from "prop-types";
import { deleteInvoice } from "../../actions/invoiceActions";

class InvoiceItem extends Component {
constructor(props) {
  super(props);
 this.handleChange = this.handleChange.bind(this);
}

handleChange(e) {
 this.setState({
   name: e.target.value
  });
}

deleteInvoice(e, invoice) {
 e.preventDefault();
 this.props.deleteInvoice(invoice);
}

render() {
 const { invoice } = this.props;

  return (
  <div className="card card-body bg-light mb-3">
    <div className="row">
      <div className="col-lg-6 col-md-4 col-8">
        <h3>Invoice: {invoice.InvoiceNumber}</h3>
        <p>Client: {invoice.Contact.Name}</p>
        <button
          onClick={e => this.deleteInvoice(e, invoice)}
          className="btn btn-danger"
        />
      </div>
    </div>
  </div>
  );
 }
 }

InvoiceItem.propTypes = {
invoice: PropTypes.object.isRequired
};

export default InvoiceItem;

.

// invoicesReducer.js
import {
GET_INVOICES,
DELETE_INVOICE,
INVOICES_LOADING
} from "../actions/types";

const initialState = {
invoices: [],
loading: false
};

export default function(state = initialState, action) {
console.log(action);
switch (action.type) {
case INVOICES_LOADING:
  return {
    ...state,
    loading: true
  };
case GET_INVOICES:
  return {
    ...state,
    invoices: action.payload,
    loading: false
  };
case DELETE_INVOICE:
  return {
    invoices: state.invoices.filter(
      invoice => invoice.Id !== action.payload
    )
  };

default:
  return state;
}
}

.

// invoiceActions.js
import axios from "axios";
import { GET_INVOICES, DELETE_INVOICE, INVOICES_LOADING } from "./types";

// I have left out the GET_INVOICES action here. It's a long Axios call and 
is working fine....

// Delete Invoice
export const deleteInvoice = invoice => dispatch => {
 dispatch({
type: DELETE_INVOICE,
payload: invoice
});
};

.

// types.js
export const GET_INVOICES = "GET_INVOICES";
export const GET_INVOICE = "GET_INVOICE";
export const DELETE_INVOICE = "DELETE_INVOICE";
export const INVOICES_LOADING = "INVOICES_LOADING";

推荐答案

您需要从connect方法中删除{getInvoices}并将其添加到如下所示的mapStateToProps函数中

You need to remove {getInvoices} from connect method and add it to mapStateToProps function like below

const mapDispatchToProps = dispatch => {
  return {
   deleteInvoice: invoice => dispatch(deleteInvoice.deleteInvoice(invoice)),
   getInvoices: actions.getInvoices // you should send your action like this
  };
};

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

这篇关于Redux-错误:mergeProps的类型对象的值无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！