阵营：如何更新既具有可变和不可变值

Question

在Javascript中的状态，string, integer and boolean values are immutable, but objects and arrays are mutable.

我们应该如何更新状态的反应，如果国家有两种类型的值吗？

例如

constructor(props) { 
    super(props); 
    this.state = { 
     success: false, 
     error: false, 
     errorMessages: {} 
    }; 
} 

假设你需要upgdate一次全部属性（success，error，errorMessages）的，这将是实现这一目标最好的方式？

至少我确定errorMessages不应该直接更新，因为它本质上是可变的，但其他人呢？

我尝试了类似下面的内容，但是这样做的结果是错误的。

const errorMessages = { 
    ...this.state, 
    "errorMessages": error.response.data, 
}; 

this.setState({ 
    errorMessages, 
    success: false, 
    error: true, 
}); 

//The errorMessages property will have "success" and "error" property in it 

Answer 1

只要你errorMessages提供新价值，将作出反应正确更新的状态。你不是突变状态直接在这里，你只是在现场提供新价值，并作出反应会做必要的突变：

this.setState({ 
    errorMessages: error.response.data 
    success: false, 
    error: true, 
}); 

Answer 2

所以假设你的状态是原来这

this.state = { 
    success: false, 
    error: false, 
    errorMessages: {} 
}; 

然后创建一个新的对象为您errorMessages这样

const errorMessages = { 
    ...this.state, 
    "errorMessages": error.response.data, 
}; 

this.setState({ 
    errorMessages, 
    success: false, 
    error: true, 
}); 

然后，你的下一个国家会有点这个样子，而且我不确定这是否是你想要什么

{ 
    errorMesages: { 
    success: false, 
    error: true, 
    errorMessages: { 
     // content of the error.response.data 
    } 
    }, 
    success: false, 
    error: true 
} 

你可能想直接分配新的状态，这实际上是你创建的errorMessages常量，你只是在做这件事;）

之所以会这样，是因为添加时一个对象的变量没有值，而只是通过名称，javascript中会自动命名标签一样的变量，例如：

const a = 10; 
 
const b = { 
 
    a 
 
}; 
 

 
// result in: { a: 10 }; 
 
console.log(b);

Answer 3

有3种方法来更新状态：

this.setState({ 
    success: !this.state.success, 
    error: !this.state.error, 
    errorMessages: delete this.state.id // if id were a prop in errorMessages 
}) 

this.setState((prevState) => { 
    return { 
    success: !prevState.success, 
    error: !prevState.error, 
    errorMessages 
    } 
}); 

this.setState((prevState) => { 
    return { 
    success: !prevState.success, 
    error: !prevState.error, 
    errorMessages 
    } 
},() => { // some callback function to execute after setState completes })