React: comment mettre à jour les Etats qui ont à la fois des valeurs mutables et immuables

Question

en Javascript, string, integer and boolean values are immutable, but objects and arrays are mutable.

Comment devons-nous mettre à jour les états dans React, si les États ont les deux types de valeurs?

par exemple.

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

Si l'on suppose que vous devez upgdate toutes les propriétés (success, error, errorMessages) à la fois, ce qui serait le meilleur moyen d'y parvenir?

Au moins je suis sûr que errorMessages ne devrait pas être mis à jour directement, parce qu'il est mutable par nature, mais qu'en est-il du reste d'entre eux?

J'ai essayé quelque chose comme ce qui suit, mais cela aboutit à un mauvais résultat.

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

Tant que vous fournissez une nouvelle valeur pour errorMessages, React mettra à jour correctement l'état. Vous n'êtes pas directement état ici muter, vous êtes juste fournir une nouvelle valeur pour le champ et React fera la mutation nécessaire:

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

Answer 2

donc en supposant que votre état est à l'origine de cette

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

et puis vous créez un nouvel objet pour votre errorMessages comme celui-ci

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

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

ensuite, votre état suivant ressemblera un peu comme ça, et je ne suis pas sûr si cela est ce que vous voulez

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

Vous vouliez sans doute attribuer le nouvel État directement, ce qui est en fait le créé, errorMessages const vous êtes un peu plus de le faire;)

La raison pour laquelle il en est ainsi, est parce que lors de l'ajout une variable à un objet sans valeur, mais juste par son nom, javascript nommeront automatiquement l'étiquette identique à la variable, par exemple:

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

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

Answer 3

Il y a 3 façons de mettre à jour l'état:

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