ReactJS-批量覆盖嵌套usestate变量的函数

Question

我有一个嵌套的字典对象，其结构如下：

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",
},
});

我创建了一个函数，该函数应该接受嵌套字典的数组(例如，signinEmail、signinPassword…(，并将其show键的值设置为false(而不更改message属性的值(。

这是我的功能：

function hideFieldErrors(setter, fieldNameArray) {
fieldNameArray.forEach((fieldName) => {
setter((prevState) => ({
...prevState,
fieldName: {
...prevState.fieldName,
show: false,
},
}));
});
}

当我调用它时，show值不会改变。为什么？

我通过这个代码调用它：

hideFieldErrors(setFieldErrorMessage, [
"signinEmail",
"signinPassword",
"signupEmail",
"signupPassword",
"signupRegistrationToken",
]);

Answer 1

您使用fieldName的方式没有如您所期望的那样工作。变量名(是一个字符串(应该用方括号括起来，使其成为一个可访问的属性。

尝试如下。

function hideFieldErrors(setter, fieldNameArray) {
fieldNameArray.forEach((fieldName) => {
setter((prevState) => ({
...prevState,
[fieldName]: {
...prevState[fieldName],
show: false,
},
}));
});
}