Utiliser useState avec un objet: comment mettre à jour

Lorsqu'une variable d'état définie avec useState est un objet avec des propriétés que vous ajoutez / mettez à jour, il est quelque peu déroutant de la mettre à jour.

Vous ne pouvez pas simplement mettre à jour l'objet, ou le composant ne sera pas rendu.

Un modèle que j'ai trouvé implique la création d'un objet temporaire avec une propriété et l'utilisation de la déstructuration d'objet pour créer un nouvel objet à partir des 2 objets existants:

const [quizAnswers, setQuizAnswers] = useState({})

const updatedValue = {} updatedValue[quizEntryIndex] = answerIndex setQuizAnswers({ …quizAnswers, …updatedValue })

La même technique peut être utilisée pour supprimer une propriété:

const copyOfObject = { ...quizAnswers }
delete copyOfObject['propertyToRemove']

setQuizAnswers({ …copyOfObject })

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: