Question

好的，所以我在React.js中有1个状态，并带有2个key，val对。长度验证和字符验证，如下所示：

const [validation, setValidationState] = useState({
   lengthValidation: "",
   characterValidation: "",
});

这2种状态都包装在名为hintValidation的函数中（我将在最后显示所有代码）

在此函数中，我有2个条件，其中一次只能工作1个。这些条件如下所示：

// if password length doesn't meet criteria set state to error message
if (
  props.promptstate["length"] < 8 ||
  props.promptstate["length"] > 128 ||
  Number.isNaN(props.promptstate["length"])
) {
  setValidationState({
    ...validation,
    ["lengthValidation"]:
      "Password length must be between 8-128 characters...",
  });
} else {
  setValidationState({
    ...validation,
    ["lengthValidation"]: "",
  });
}

// if password characters aren't selected at all set state to error message
if (
  !props.promptstate["specialCharacters"] &&
  !props.promptstate["upperCase"] &&
  !props.promptstate["lowerCase"] &&
  !props.promptstate["numbers"]
) {
  setValidationState({
    ...validation,
    ["characterValidation"]:
      "At least one character type should be selected...",
  });
}
// if password does meet require set state back to empty string
else {
  setValidationState({
    ...validation,
    ["characterValidation"]: "",
  });
}

现在，我的问题是在按钮上调用我的函数时，仅单击其中一个条件运行。考虑到这是运行的第二个条件，这很奇怪。

更奇怪的部分是，如果我注释掉一个条件，而我的函数满足该条件，它将运行；如果我切换另一个条件的注释，而我的函数满足条件，则该注释也将运行。

两个条件同时起作用时，问题就出在我眼前。

我的预期行为是两个条件都满足条件条件时更新状态。

下面是单击时正在运行的状态和全部功能。

const [validation, setValidationState] = useState({
   lengthValidation: "",
   characterValidation: "",
});

const promptValidation = () => {
// if password length doesn't meet criteria set state to error message
if (
  props.promptstate["length"] < 8 ||
  props.promptstate["length"] > 128 ||
  Number.isNaN(props.promptstate["length"])
) {
  setValidationState({
    ...validation,
    ["lengthValidation"]:
      "Password length must be between 8-128 characters...",
  });
} else {
  setValidationState({
    ...validation,
    ["lengthValidation"]: "",
  });
}

// if password characters aren't selected at all set state to error message
if (
  !props.promptstate["specialCharacters"] &&
  !props.promptstate["upperCase"] &&
  !props.promptstate["lowerCase"] &&
  !props.promptstate["numbers"]
) {
  setValidationState({
    ...validation,
    ["characterValidation"]:
      "At least one character type should be selected...",
  });
}
// if password does meet require set state back to empty string
else {
  setValidationState({
    ...validation,
    ["characterValidation"]: "",
  });
}

console.log(validation);

};

请尽可能提供帮助，谢谢。关于＆es6，我是个菜鸟。

Answer 1

您看到的问题之所以发生，是因为事件处理程序中的状态更新是按批处理的，因此，当您触发2个状态更新调用时，如果同时满足两个条件，则您的状态将被覆盖。

这里的解决方案是使用回调方法来更新状态

// if password length doesn't meet criteria set state to error message
if (
  props.promptstate["length"] < 8 ||
  props.promptstate["length"] > 128 ||
  Number.isNaN(props.promptstate["length"])
) {
  setValidationState(prevValidation => ({
    ...prevValidation,
    ["lengthValidation"]:
      "Password length must be between 8-128 characters...",
  }));
} else {
  setValidationState(prevValidation => ({
    ...prevValidation,
    ["lengthValidation"]: "",
  }));
}

// if password characters aren't selected at all set state to error message
if (
  !props.promptstate["specialCharacters"] &&
  !props.promptstate["upperCase"] &&
  !props.promptstate["lowerCase"] &&
  !props.promptstate["numbers"]
) {
  setValidationState( prevValidation => ({
    ...prevValidation,
    ["characterValidation"]:
      "At least one character type should be selected...",
  }));
}
// if password does meet require set state back to empty string
else {
  setValidationState(prevValidation => ({
    ...validation,
    ["characterValidation"]: "",
  }));
}

为什么在调用我的功能时只有一种状态发生变化？

1 个答案: