const [description, setDescription] = React.useState({ "key1":"first value", "key2":"second value", "key3":"third value" } )Tengo un objeto como el proporcionado arriba. Intenté eliminar una clave del objeto con la función a continuación.
const remove = (key) => { delete description[key] }el problema que tengo es que cuando llamo a esta función, la clave se elimina del objeto, pero la reacción no actualiza el estado.
el problema que tengo es que cuando llamo a esta función, la clave se elimina del objeto, pero la reacción no actualiza el estado.
Eso es porque no debes mutar el estado. El uso de delete description[key] mutará el estado y no informa a React que se debe activar una nueva representación.
Debe usar setDescription para informar a React sobre un cambio de estado. Y en lugar de mutar el estado existente, cree uno nuevo sin la propiedad key . Esto se puede hacer fácilmente con la asignación de desestructuración .
const remove = (key) => { setDescription(({ [key]: value, ...description }) => description); }; En la solución anterior, extraemos el valor de la propiedad key y lo almacenamos en la variable de value . Todas las demás propiedades (sin key ) se recopilan en un nuevo objeto y se almacenan en la variable de description .
Este proceso esencialmente crea una copia de la descripción anterior sin la propiedad key y la usa como el nuevo estado.
Si pasa remove como una propiedad a otros componentes, podría considerar usaruseCallback también. Esto estabiliza la identidad de la función de remove y podría resultar en menos renderizaciones.
const remove = useCallback((key) => { setDescription(({ [key]: value, ...description }) => description); }, []); Normalmente pasa sus dependencias en la matriz de dependencias al final, pero debido a que la identidad de setDescription es estable , puede omitir esta dependencia.
Si todas las dependencias tienen una identidad estable o la matriz de dependencias está vacía, la función resultante también tiene una identidad estable.
Tenga en cuenta que está mutando una instancia local de su estado. Debe actualizar el estado a través del gancho useState .
const remove = (key) => { setDescription(description => ({ ...description, [key]: undefined })) } ¡Tenga en cuenta que nunca debe mutar su estado! Esto puede causar errores en su aplicación. Entonces, en el código anterior, creamos un nuevo objeto, copiamos los datos que tenemos y luego simplemente establecemos [key] en indefinido, eliminando efectivamente el valor allí.