变异嵌套对象

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}
        }))
    }));
};

Answer 2

你可以覆盖qazxsw poi键并传播qazxsw poi

dataGrid

Answer 3

不幸的是，您必须取消想要更改的对象的每一层，例如：

step.dataGrid

编辑：将

isDraggable = () => {
    this.setState(prevState => {

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

        return { stepsData: steps };
    })
};

更改为其函数回调形式以响应T.J.克劳德的评论。