子功能组件中的状态未更新

Question

我将对象数组传递给子功能组件 DispatchersDetail。第一个传递的数组工作正常。但是当我传递第二个数组时，它虽然显示了新数组，但是当我登录控制台或尝试提交数据时，它会记录旧的第一个数组。它不会用新数组替换旧数组。这是我的功能组件

function DispatchersDetail(props) {
    var dispatcher = {};
    dispatcher = props.dispatcher

    $(':checkbox').each(function () {
        this.checked = false;
    });

    dispatcher && dispatcher.allDrivers.map((item) => {
        item.isChecked = false
    })

    $('#checkall').click(function (event) {
        if (this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function () {

                this.checked = true;
                dispatcher && dispatcher.allDrivers.map((item) => {

                    item.isChecked = true
                })
            });
        } 
        else {
            $(':checkbox').each(function () {
                this.checked = false;
                dispatcher && dispatcher.allDrivers.map((item) => {

                    item.isChecked = false
                })
            });
        }
    });

    function addExcludedDriver(event) {
        dispatcher && dispatcher.allDrivers.map((driver) => {
            if (driver._id == event.target.value) {
                if (document.getElementById(driver._id).checked) {
                    driver.isChecked = true
                } else {
                    driver.isChecked = false
                }
            }
        })
    }

    function submitHandlerForm() {
        let nooofdriverschecked = 0
        let hours = $("#hours").val()
        let days = $("#days").val()

        dispatcher && dispatcher.allDrivers.map((driver) => {
            if (driver.isChecked == true) {
                nooofdriverschecked++
            }
        })

        if (nooofdriverschecked == 0) {
            console.log("No driver selected")
        } 
        else {
            let reqData = {
                drivers: dispatcher.allDrivers, //here it is setting the old array of objects
                hours: hours,
                days: days
            }

            console.log(reqData)
        }
    }

    $.validator.setDefaults({
        submitHandler: function (event) {
            console.log("SUbmit called")

            submitHandlerForm();
        }
    });

    $('#excludeform').validate({
        rules: {
            hours: {
                required: true

            },
            days: {
                required: true

            }

        },
        messages: {
            hours: {
                required: "Please select hours!"
            },
            days: {
                required: "Please select days!"
            }
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });

    return (
        <div >

            <div className="row calltype-gap">
                <div className="col-md-6 col-sm-12">
                    <div className="btn-group">
                        <button type="button" className="btn btn-default dropdown-toggle dropdown-hover" data-toggle="dropdown"><i className="fas fa-filter" />
                            Filter
                            <span className="sr-only">Toggle Dropdown</span>
                            <div className="dropdown-menu" role="menu">
                                <a className="dropdown-item" href="#">Company</a>
                                <a className="dropdown-item" href="#">Customer</a>
                            </div>
                        </button>
                    </div>
                </div>
                <div className="col-md-6 col-sm-12">
                    Exclude From
                    <div className="btn-group">
                        <button type="button" className="btn btn-default dropdown-toggle dropdown-hover" data-toggle="dropdown">New Jobs
                            <span className="sr-only">Toggle Dropdown</span>
                            <div className="dropdown-menu" role="menu">

                                <a id="newjobsbtn" type="button" className="dropdown-item" href="#" >New Jobs</a>
                                <a type="button" id="biddingbtn" className="dropdown-item" href="#">Bidding</a>

                            </div>
                        </button>
                    </div>
                </div>
            </div>
            <div className="exclude-div-border">
                <div className="row calltype-gap">
                    <div className="col-md-6 col-sm-12">
                        <h3>{dispatcher.full_name}'s Towing</h3>
                    </div>
                    <div className="col-md-6 col-sm-12">
                        <div className="custom-control custom-checkbox checkbox-pos">
                            <input className="custom-control-input" type="checkbox" id="checkall" name="checkall" defaultValue="option1" />
                            <label htmlFor="checkall" className="custom-control-label">Select All</label>
                        </div>
                    </div>
                </div>

                <div className="row calltype-gap">
                    <label>Drivers List</label>
                </div>

                <form id="excludeform">
                    <input type="hidden" id="alldrivers" value="" />
                    <div className="row calltype-gap">
                        <div className="col-md-6 col-sm-12 form-group">
                            Exclude Hours <input type="number" min="1" placeholder="Hours" id="hours" name="hours" />
                        </div>
                        <div className="col-md-6 col-sm-12 form-group">
                            Exclude Days <input type="number" min="1" placeholder="Days" id="days" name="days" />
                        </div>
                    </div>

                    <div className="row calltype-gap">
                        {dispatcher && dispatcher.allDrivers.map((d, i) => {
                            return (<div id={d.dispatcher._id} key={i} className="col-md-12 custom-control custom-checkbox checkbox-pos">
                                <input onChange={addExcludedDriver} className="custom-control-input" type="checkbox" id={d._id} name={d._id} defaultValue={d._id} />
                                <label htmlFor={d._id} className="custom-control-label">{d.full_name}</label>
                            </div>)
                        })}
                    </div>

                    <div className="row calltype-gap">
                        <div className="col-md-6 col-sm-12"></div>
                        <div className="col-md-6 col-sm-12">
                            <button type="submit" value="submit" className="btn btn-exclude-done-margin btn-create-call btn-exclude-done-size">Done</button>
                            <button type="button" className="btn btn-cancel-call btn-exclude-done-size" >Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}

因此，尝试登录控制台时不会描述新传递的数组