javascript - react setState渲染行为

我有一个关于这两个选项的渲染行为的问题：

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
}

使用内部地图功能的方法相同。