Есть ли способ добавить функцию ошибок в форме React Hook?
Я изучаю форму React и React Hook, мне удалось отобразить пользовательские сообщения под входными данными, но я также хочу отобразить предупреждение с помощью react-toastify, чтобы сообщить пользователю обо всех ошибках. Как добавить функцию из существующего сообщения об ошибке?
Я хочу что-то вроде errors && callMyFunction().
Привет! Я попробовал это: useEffect(() => error && console.info("error"), [errors]) Но по какой-то причине я все равно получаю console.info при первом рендеринге, но объект ошибок должен быть пуст при первом рендерить (думаю?) @jonrsharpe
«Объект ошибок должен быть пустым при первом рендеринге» - то, что вы показываете, вовсе не опровергает то, что пустой массив по-прежнему правдив.
ох, ладно, это имеет смысл! как мне проверить, пусто ли оно? Я пробовал error.length, но это дает неопределенное значение
что-то вроде: console.info(errors?.length) ? Я все еще не могу определиться @HamedJimoh
errors?.length не определено, если errors не определено, необязательная цепочка не создает волшебным образом значение. Пожалуйста, выполните некоторую отладку, чтобы увидеть, с чем вы на самом деле имеете дело.
Вот почему я спрашиваю, как поступить в этой ситуации. Ошибка Console.logging дает мне ошибки, которые я пытаюсь получить, но ошибки? Длина все еще не определена.
Как я уже сказал, при первом рендеринге выдается неопределенное значение, и я не знаю, как проверить, есть ли что-нибудь внутри, прежде чем делать что-нибудь еще. Я новичок в React и React Hook Forms, поэтому не знаю, что делать.
Ответы 2
Я просмотрел документацию React Hook Form и понял, что свойство errorsformState возвращает объект, а не массив (https://react-hook-form.com/docs/useform/formstate). Поэтому, если вы хотите запускать всплывающее уведомление при возникновении ошибки, вы можете просто добиться этого с помощью крючка useEffect, используя этот воспроизводимый код, который я написал:
import { useEffect } from "react"
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
const ContactPage = () => {
const { formState: { errors }, } = useForm({
defaultValues: {
firstName: "",
lastName: "",
},
mode: "all",
});
useEffect(() => {
const errorMessages = Object.values(errors);
if (errorMessages.length > 0) {
for (const error of errorMessages) {
toast.error(error.message, {
position: "top-center",
hideProgressBar: true,
toastId: error.message, //This prevents the toast from opening the same error message multiple times whenever errors change
});
}
}
}, [Object.values(errors).length]);
}
Я надеюсь, что это решит эту проблему для вас.
[Object.values(errors).length] не подсказывает изменение, когда происходит изменение того, какие ошибки есть, а количество ошибок остается прежним
Он действительно вызывает изменения и запускает useEffect() всякий раз, когда меняется длина errors. Я протестировал этот минимальный код.
Проблема не в этом. Подумайте, что произойдет, если вы перейдете от { "error1": "some error" } к { "error2": "other error" }.
Форма React Hook formStateerrors структурирована не так. errors структурировано (на основе примера кода), так как состояние { errors: { "firstName": { message: "FirstName is required" } }, {"lastName": {message: "LastName is required" } } }. So this means, the errors``` length будет продолжать расти относительно ошибок отдельных полей.
Нет, если вы измените { errors: { "firstName": { message: "FirstName is required" } } } на { errors: { "firstName": { message: "Invalid FirstName" } } } или аналогичный
Ты прав. Думаю, теперь я понял вашу точку зрения. Это был хороший улов. Спасибо.
Функция handleSubmit получает два параметра:
onValidза обработку успешных заявок.onInvalidдля обработки ошибок.
onInvalid срабатывает всякий раз, когда форма отправляется с ошибками.
Вот пример:
const onError = (fieldsErrors) => {
for (const fieldName in fieldsErrors) {
toast.error(`Error in ${fieldName}: ${fieldsErrors[fieldName].message}`);
}
};
Затем в вашей форме:
return (
<form onSubmit = {handleSubmit(onSubmit, onError)}>
);
быстрый вопрос, это отлично работает (большое спасибо за функциональный пример моей собственной проблемы)! Я просто хочу уточнить, зачем здесь нужен $?
Пожалуйста! $ — это литералы шаблона
Почему бы и нет
useEffect(() => ..., [errors]), если вы хотите что-то сделать, когда ошибки изменятся?