Tengo un objeto de diccionario anidado con la siguiente estructura:
const [fieldErrorMessage, setFieldErrorMessage] = useState({ signinEmail: { show: false, message: "Error", }, signinPassword: { show: false, message: "Error", }, signupEmail: { show: false, message: "Error", }, signupPassword: { show: false, message: "Error", }, signupRegistrationToken: { show: false, message: "Error", }, }); Creé una función que debería incluir una serie de diccionarios anidados (por ejemplo, signinEmail , signinPassword , ...) y establecí su valor para su clave de show en false (sin cambiar el valor de la propiedad del message ).
Aquí está mi función:
function hideFieldErrors(setter, fieldNameArray) { fieldNameArray.forEach((fieldName) => { setter((prevState) => ({ ...prevState, fieldName: { ...prevState.fieldName, show: false, }, })); }); } Cuando lo llamo, los valores show no cambian. ¿Porqué es eso?
Lo estoy llamando a través de este código:
hideFieldErrors(setFieldErrorMessage, [ "signinEmail", "signinPassword", "signupEmail", "signupPassword", "signupRegistrationToken", ]);La forma en que ha utilizado fieldName no funciona como esperaba. el nombre de la variable (que es una cadena) se debe incluir entre corchetes para que sea una propiedad accesible.
Prueba como a continuación.
function hideFieldErrors(setter, fieldNameArray) { fieldNameArray.forEach((fieldName) => { setter((prevState) => ({ ...prevState, [fieldName]: { ...prevState[fieldName], show: false, }, })); }); }