[英]React setState rendering behavior
我有一个关于这两个选项的渲染行为的问题:
export function saveOrCancelStepContentComponents(stepIndex, targetArray, newArray) {
// Option 1
let stepsData = this.state.stepsData.slice();
stepsData[stepIndex][targetArray] = newArray;
this.setState({stepsData: stepsData}, () => {
console.log("saveStepConditions[]:", this.state.stepsData[stepIndex][targetArray]);
});
// Option 2
this.setState((prevState) => ({
stepsData: prevState.stepsData.map((currentStep, i) => {
if (i === stepIndex) {
return {
...currentStep,
[targetArray]: newArray,
}
}
return currentStep
})
}), () => {
console.log("saveStepConditions[]:", this.state.stepsData[stepIndex][targetArray]);
});
}
取消和保存可以同时使用这两个选项,也就是说console.logs很好。 但是,只有选项2重新呈现该页面。 与选项1搭配使用不会导致任何表型改变。 有什么想法吗? 谢谢!
这行stepsData[stepIndex][targetArray] = newArray;
stepsData[stepIndex]
对象,而不创建一个新对象。
应该像
stepsData[stepIndex] = {
...stepsData[stepIndex],
[targetArray]: newArray
}
使用内部地图功能的方法相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.