Почему только одно из моих состояний изменяется при вызове моей функции?

Question

Хорошо, у меня в React 1 состояние. js, с 2 ключами, val парами. Проверка длины и проверка символов, как показано ниже:

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

Эти 2 состояния заключены в функцию с именем promptValidation (я покажу весь код в конце)

В этой функции у меня есть 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

Проблема, с которой вы сталкиваетесь, возникает из-за того, что обновления состояний в обработчиках событий объединяются в реаги и поэтому ваше состояние переопределяется, если выполняются оба условия при запуске двух вызовов обновления состояния.

Решение здесь заключается в использовании метода обратного вызова для обновления состояния

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