javascript - 改变嵌套对象

Question

在将对象设置为这样的状态之前，我尽量不改变对象中的对象:

isDraggable = () => {
        let steps = [...this.state.stepsData];

        steps = steps.map(step => {
            return {
                ...step,
                dataGrid.static: !step.dataGrid.static 
            }
        });

        this.setState({stepsData: steps})
 };

对象结构如下所示:

{
 stepsData:[{
  dataGrid: {
   x: ...
   y: ...
   static: true
  }
 }]
}

此行 dataGrid.static: !step.dataGrid.static 无法编译。我该如何解决这个问题？提前致谢!

Answer 1

您需要克隆 dataGrid 引用的对象。另请注意，您 must use the function callback version of setState when you're setting state based on state :

isDraggable = () => {
    this.setState(prevState => {
        return {stepsData: prevState.steps.map(step => {
            return {
                ...step,
                dataGrid: {...step.dataGrid, static: !step.dataGrid.static}
            };
        })};
    });
};

或更简洁但可能不太清晰:

isDraggable = () => {
    this.setState(prevState => ({
        stepsData: prevState.steps.map(step => ({
            ...step,
            dataGrid: {...step.dataGrid, static: !step.dataGrid.static}
        }))
    }));
};