在反应js

Question

编辑 - 此代码现在正常工作

我一直在尝试使用特定的id更新名为bill的对象数组的付费属性。 传递给操作的对象不会相应更改，并且更新也在reducer中不起作用。 我正在编辑editPaidStatus。 支付的对象：this.state.paid正确传递到操作文件，但之后在reducer中没有变化，因此特定bill id的状态值不会从false变为true。假的是给了pay制定账单时的财产。现在我希望将该财产更改为真

这是我的行动档案 -

export const editPaidStatus = (id, updates = {}) => {
    console.log("running");
    console.log(id);
    console.log(updates);
    return {
        type: "EDIT_PAID_STATUS",
        id: id,
        updates: {
            paid: updates.paid
        }
    };
};

这是我的减速机 -

const billDefaultState = [];
const billReducer = (state = billDefaultState, action) => {
    switch (action.type) {
        case "ADD_BILL": return [...state, action.bill];
        case "EDIT_PAID_STATUS": return state.map(bill => {
            if (bill.id === action.id) {
                return { ...bill, ...action.updates };
            } else {
                return bill;
            }
        });

这里是调用调度的地方 -

<div>
    {this.state.payvisibility && (
        <MakePayment
          user={this.props.user}
          bill={this.props.bill}
          onMakingPayment={(billi = {}) => {
            this.props.dispatch(editPaidStatus(this.props.bill.id, billi));

          }}
        />
      )}
</div>

这是MakePayment.js文件 -

import React from "react";
import { connect } from "react-redux";
import UserPaidBills from "../selectors/UserPaidBills";
import { Link } from "react-router-dom";
import { editPaidStatus } from "../actions/Bill";
import { withRouter } from "react-router-dom";

class MakePayment extends React.Component {
    constructor(props) {
        super(props);
        this.onMakingPayment = this.onMakingPayment.bind(this);
        this.state = {paid: true};
    }

    onMakingPayment() {
        this.props.onMakingPayment({ paid: this.state.paid });
    }

    render() {
        console.log(this.props);
        console.log(this.props.user.FirstName);
        console.log(this.props.bill.billername);
        return (
           <div>
             <button onClick={() => this.onMakingPayment()}>Pay</button>
            <Link to={`username/${this.props.user.id}`}>Cancel</Link>
           </div>
        );
    }
}

export default withRouter(connect()(MakePayment));