Reactjs Redux-错误:mergeProps的类型对象的值无效
我在使删除分派事件正常工作时遇到问题。我正在尝试从状态中删除列表项 我得到的错误如下:Reactjs Redux-错误:mergeProps的类型对象的值无效,reactjs,redux,react-redux,state,Reactjs,Redux,React Redux,State,我在使删除分派事件正常工作时遇到问题。我正在尝试从状态中删除列表项 我得到的错误如下: Error: Invalid value of type object for mergeProps argument when connecting component Invoices. 我是redux新手,尝试过各种不同的方法 据我所知,Redux在Invoices.js的下面几行中抛出了一个错误 export default connect( mapStateToProps, mapDispatc
Error: Invalid value of type object for mergeProps argument when connecting
component Invoices.
我是redux新手,尝试过各种不同的方法
据我所知,Redux在Invoices.js的下面几行中抛出了一个错误
export default connect(
mapStateToProps,
mapDispatchToProps,
{ getInvoices }
)(Invoices);
如果我取出mapDispatchToProps,则错误将停止,但显然我无法使用此方法。我已尝试将另一个参数设置为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);
您需要从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);
// 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";
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);