Логика проверки формы c Проблема (с использованием React useState Hook) - PullRequest
1 голос
/ 05 мая 2020

Я пытаюсь выполнить некоторую проверку формы. У меня есть два контролируемых элемента в моей форме: текстовое поле сообщений и текстовое поле получателей. Итак, у меня есть state.message (строка) и state.recipients (массив), которые управляют некоторыми текстовыми полями (когда вы вводите текстовые поля, эти значения state меняются). Состояние работает исправно. То есть, когда я ввожу текстовое поле сообщения, обновляется state.messages. Когда я ввожу в поле получателей, обновляется state.recipients. invalid определяется с помощью хука useState следующим образом:

const [invalid, setInvalid] = useState({
  message: false,
  recipients: false,
})

Я хочу, чтобы invalid.messages было true, когда state.messages пусто, и invalid.recipients было истинным, когда state.recipients пусто. Вот мой код проверки, с которым у меня возникли некоторые проблемы:

if (state.recipients.length === 0) {
  setInvalid({
    ...invalid,
    recipients: true,
  });
} else {
  setInvalid({
    ...invalid,
    recipients: false,
  });
}

if (state.message === '') {
  setInvalid({
    ...invalid,
    message: true,
  });
} else {
  setInvalid({
    ...invalid,
    message: false,
  });
}

Мои условия хотя и работают . state.recipients.length действительно равно 0, когда текстовое поле получателя пусто, и state.message действительно равно '', когда текстовое поле сообщения пусто. Интересно то, что когда оба элемента формы пусты (то есть получатели и сообщение пусты), invalid равно

{
  recipients: false,
  message: true
}

Это очень странно, потому что я не Я не вижу ошибок в логах c, которые я использую для изменения состояния. Более странная часть состоит в том, что когда я переворачиваю операторы if в этом логе проверки c (то есть сначала проверяю состояние сообщения, а затем состояние получателя), происходит обратное: состояние выглядит так:

{
  recipients: true,
  message: false
}

Я не знаю, почему это происходит, поэтому можете ли вы указать на недостаток в моем журнале c?

Изменить: код обработчика некоторых событий для текстовых полей: для текстовое поле сообщений: onChange={(e) => { setState({ ...state, message: e.target.value }); }} Для текстового поля получателя (которое намеренно переопределяет первый элемент в state.recipients):

onChange={(e, val) => setState({
  ...state,
  recipients: val,
})}

Но этот код на самом деле не проблема, потому что состояние обрабатывается правильно и он пуст, когда должен быть.

1 Ответ

2 голосов
/ 05 мая 2020

Обновления состояния являются асинхронными, поэтому при вызове setInvalid и добавлении предыдущего состояния с помощью ...invalid для обоих обновлений используется одно и то же старое состояние .

Другими словами , когда вызывается вставленный вами код, первый setInvalid для выполнения не завершает sh обновление состояния до того, как второй начинает выполняться, и сохраняет состояние, используя ...invalid.

В результате правильно устанавливается только messaged.

Вероятно, вы можете решить эту проблему, сделав обе переменные отдельными объектами состояния.

const [invalidRecipiants, setInvalidRecipiants] = useState(true);
const [invalidMessages, setInvalidMessages] = useState(true);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...