arrays - 子功能组件中的状态未更新
问题描述
我将对象数组传递给子功能组件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>
);
}
因此,尝试登录控制台时未显示新传递的数组
解决方案
推荐阅读
- karate - 是否可以覆盖已在后台或场景中定义的被调用功能文件中的参数?
- android - 相机 2 预览被拉伸
- airflow - 从气流中的 dag 子文件夹导入文件
- c# - 项目初始运行后“无法获取 /”
- c++ - 我正在尝试使用布尔函数以外的东西
- android - 为什么没有显示所有数据?
- java - 来自 Windows 10 上的 Java 的 Tensorflow 1.13.1 中的 java.lang.UnsatisfiedLinkError
- wordpress - 如何在帖子页面上仅显示相关标签
- c++ - 如何在 UnrealEngine 中对非 2 次幂纹理进行下采样?
- javascript - 抓取谷歌图片的网址:未定义