Я пытаюсь выполнить некоторую проверку формы. У меня есть два контролируемых элемента в моей форме: текстовое поле сообщений и текстовое поле получателей. Итак, у меня есть 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,
})}
Но этот код на самом деле не проблема, потому что состояние обрабатывается правильно и он пуст, когда должен быть.