Usar useState con un objeto: cómo actualizar

Cuando una variable de estado definida con useState es un objeto con propiedades que agrega / actualiza, es algo confuso cómo actualizarlo.

No puede simplemente actualizar el objeto o el componente no se volverá a procesar.

Un patrón que encontré implica crear un objeto temporal con una propiedad y usar la desestructuración de objetos para crear un nuevo objeto a partir de los 2 objetos existentes:

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

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

Se puede utilizar la misma técnica para eliminar una propiedad:

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

setQuizAnswers({ …copyOfObject })

Descarga mi gratisReact Handbook


Más tutoriales de react: