如何解决子功能组件中的状态未更新
我将对象数组传递给子功能组件 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,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>
);
}
因此,尝试登录控制台时不会描述新传递的数组
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。