gpt4 book ai didi

reactjs - Redux - 错误 : Invalid value of type object for mergeProps

转载 作者:行者123 更新时间:2023-12-03 13:43:49 25 4
gpt4 key购买 nike

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

我得到的错误如下:

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/删除调度时我遇到了这个错误。

我有以下文件:

//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 函数中,如下所示

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

关于reactjs - Redux - 错误 : Invalid value of type object for mergeProps,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52418764/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com