如何解决即使在状态更改后,状态数组中动态映射的组件也不会更新
我正在映射状态中的数组以动态构建下拉列表。我有两种工作方法来添加和删除数组中的值。当我删除数组并将值添加到数组时,我希望 UI 元素也随着状态的变化而更新。添加有效,但每次删除都失败。我已经确认状态中的数组正在正确更改,但我只能删除最新的组件而不是特定的组件。感谢您的帮助。
//
handletoggle() {
return this.state.AdditionQueryArray.map((array,index) => {
let key = array.key;
return (
<div>
<Select
onChange={(e) => this.AdditionalOperatorHandleChange(e,key)}
options={this.state.OperatorOptions}
placeholder="Select Operator"
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
<button onClick={() => this.deleteAdditonalQuery(index)}>
Delete
</button>
{this.forceUpdate}
</div>
);
});
}
createAdditionalQuery() {
const state = this.state;
let key = Math.random().toString(36).substring(7);
var copyArr = [...this.state.AdditionQueryArray];
copyArr.push({
key: key,field: "fieldDefault",property: "propertyDefault",PropValue: "Propvalue",});
this.setState({
AdditionQueryArray: copyArr,});
}
deleteAdditonalQuery(indexVal) {
var state = this.state;
var copyArr = [...this.state.AdditionQueryArray];
if (indexVal > -1) {
copyArr.splice(indexVal,1);
}
this.setState({
AdditionQueryArray: copyArr,});
}
render() {
return (
<div>
<button onClick={this.createAdditionalQuery}>Add Query </button>
{this.handletoggle()}
</div>
);
}
////
解决方法
浅拷贝和 array.splice
是一种通过索引从数组中删除元素的有趣方法。我建议使用 array.filter
代替,它更干净。当更新的数组存储在状态中时,我建议始终使用功能状态更新,尤其是在循环中附加的回调中使用时。这避免了任何陈旧的状态外壳。
deleteAdditonalQuery(indexVal) {
this.setState(prevState => ({
AdditionQueryArray: prevState.AdditionQueryArray.filter(
(el,index) => index !== indexVal
),}));
}
同样在添加处理程序中,使用功能状态更新。
createAdditionalQuery() {
this.setState(prevState => ({
AdditionQueryArray: prevState.AdditionQueryArray.concat({
key: Math.random().toString(36).substring(7),field: "fieldDefault",property: "propertyDefault",PropValue: "Propvalue",}),}));
}
在 handleToggle
中删除“死”强制更新代码,应该没有必要。无论如何它都没有被调用。不要忘记向被映射的最外层元素添加一个 React 键。
handleToggle() {
return this.state.AdditionQueryArray.map((array,index) => {
const key = array.key;
return (
<div key={key}> // <-- add React key!
<Select
onChange={(e) => this.AdditionalOperatorHandleChange(e,key)}
options={this.state.OperatorOptions}
placeholder="Select Operator"
menuPortalTarget={document.body}
menuPosition={"fixed"}
/>
<button onClick={() => this.deleteAdditonalQuery(index)}>
Delete
</button>
</div>
);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。