更改上下文时如何立即更新错误值

Posted 2023-02-21

【中文标题】更改上下文时如何立即更新错误值

【英文标题】：How update errors value immediately when I am changing Context

【发布时间】：2021-12-25 00:57:02

【问题描述】：

我有使用 Formik 和 Yup 创建的联系表。此外，在我的应用程序中，我使用 Context 来更改语言。问题是当我对某些输入字段有错误然后我使用上下文更改语言时。错误语言不会立即更新，但只有在我对输入进行一些操作时才会更新。如何解决？

function ContactForm() 

  const [lang] = useContext(LangContext);

  const initialValues =  email: '', name: '', message: '' ;
  const contactSchema = Yup.object().shape(
    email: Yup.string()
      .email(lang.contact.writeMe.emailIncorrect)
      .required(lang.contact.writeMe.emailError),
    name: Yup.string()
      .required(lang.contact.writeMe.nameError),
    message: Yup.string()
      .required(lang.contact.writeMe.messageError),
  );

  return (
    <section id="contact" className="bg-dark ">
      <div className="container">
        <div className="wrapper">
          <div className="row no-gutters">
            <div className="col-md-6 d-flex align-items-stretch">
              <div className="contact-wrap w-100 p-md-5 p-4 py-5">
                <Formik
                  initialValues=initialValues
                  validationSchema=contactSchema
                  onSubmit=(values,  setSubmitting, resetForm ) => 
                    const timeOut = setTimeout(() => 
                      setSubmitting(false);
                      clearTimeout(timeOut);
                    , 1500);
                    sendEmail(values, resetForm);
                  
                >
                  (
                    values,
                    errors,
                    touched,
                    handleChange,
                    handleBlur,
                    handleSubmit,
                    isSubmitting,
                  ) => 
                    return (
                      <form method="POST" id="contactForm" name="contactForm" className="contactForm" noValidate="novalidate" onSubmit=handleSubmit >
                        <h3 className="mb-4">lang.contact.writeMe.title</h3>
                        isFormSended
                          ? (isSubmitting
                            ? <div id="form-message-primary" className="mb-4">lang.contact.writeMe.subtitleSending</div>
                            : (isError
                              ? <div id="form-message-danger" className="mb-4 text-danger">lang.contact.writeMe.subtitleError</div>
                              : <div id="form-message-primary" className="mb-4">lang.contact.writeMe.subtitleSuccess</div>))
                          : <div id="form-message-danger" className="mb-4">lang.contact.writeMe.subtitle</div>
                        <div className="row">
                          <div className="col-md-12 mb-1">
                            <div className="form-group">
                              <input
                                type="email"
                                className=`form-control $touched.email ? (errors.email ? 'incorrect' : 'correct') : ''`
                                name="email"
                                id="email"
                                placeholder=lang.contact.writeMe.emailInput
                                onChange=handleChange
                                onBlur=handleBlur
                                value=values.email
                              />
                              <p className="text-danger">errors.email && touched.email && errors.email</p>
                            </div>
                          </div>
                          <div className="col-md-12 mb-1">
                            <div className="form-group">
                              <input
                                type="text"
                                autoComplete="new-password"
                                className=`form-control $touched.name ? (errors.name ? 'incorrect' : 'correct') : ''`
                                name="name"
                                id="name"
                                placeholder=lang.contact.writeMe.nameInput
                                onChange=handleChange
                                onBlur=handleBlur
                                value=values.name
                              />
                              <p className="text-danger">errors.name && touched.name && errors.name</p>
                            </div>
                          </div>
                          <div className="col-md-12 mb-1">
                            <div className="form-group">
                              <textarea
                                name="message"
                                className=`form-control $touched.message ? (errors.message ? 'incorrect' : 'correct') : ''`
                                id="message"
                                cols="30"
                                rows="6"
                                placeholder=lang.contact.writeMe.messageInput
                                onChange=handleChange
                                onBlur=handleBlur
                                value=values.message
                              ></textarea>
                              <p className="text-danger">errors.message && touched.message && errors.message</p>
                            </div>
                          </div>
                          <div className="col-md-12">
                            <div className="form-group">
                              <button type="submit" className="btn btn-primary" disabled=isSubmitting>lang.contact.writeMe.buttonMessage</button>
                              <div className="submitting"></div>
                            </div>
                          </div>
                        </div>
                      </form>
                    );
                  
                </Formik>
(...)
  );

【参考方案1】：

要支持多语言验证yup 消息，您可以使用setLocale，如此处所述https://github.com/jquense/yup#using-a-custom-locale-dictionary。像这样：

setLocale(
  email: 
    required: 'Required email',
  ,
);

【参考方案2】：

对于多语言，您应该使用 react-localization。有关更多信息，请单击下面的链接。 https://www.npmjs.com/package/react-localization

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。