Redux - 错误：mergeProps 的类型对象的值无效

Posted 2023-02-22

【中文标题】Redux - 错误：mergeProps 的类型对象的值无效

【英文标题】：Redux - Error: Invalid value of type object for mergeProps

【发布时间】：2019-02-24 09:21:44

【问题描述】：

我在让删除调度事件正常工作时遇到问题。我正在尝试从状态中删除列表项。

我得到的错误如下：

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

我是 redux 新手，尝试过各种不同的方法。

据我所知，Redux 在 Invoices.js 的以下几行中抛出错误

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

如果我取出ma​​pDispatchToProps，则错误将停止，但显然我不能使用此方法。我已经尝试设置另一个 null 参数，以防它期待一个 mergeProps 参数 （即使它是可选的），如下所示：

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

但是，我似乎无法绕过这个错误。

注意：一切正常，只是在我引入 mapDispatchToProps / delete dispatch 时遇到了这个错误。

我有以下文件：

//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";

【参考方案1】：

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

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