React Native，不显示来自 Formik-Yup 验证的错误

Question

我已经在 React Native 中实现了 Yup + Formik 来处理表单。

我在表单中有 title 和正文 input 字段。正在显示 title 的验证错误，但未显示与 body 相关的错误消息。



const ReviewSchema = yup.object(
  {
    title: yup.string().required().min(2),
  },
  {
    body: yup.string().required().min(3),
  }
);

function Adddata() {
  return (
    <View>
      <Formik
        initialValues={{ title: "", body: "" }}
        validationSchema={ReviewSchema}
        onSubmit={(v) => {
          console.log(v);
        }}
      >
        {(props) => (
          <View>
            <TextInput
              value={props.values.title}
              onChangeText={props.handleChange("title")}
            />
            <Text>{props.errors.title}</Text>
            <TextInput
              value={props.values.body}
              onChangeText={props.handleChange("body")}
            />
            <Text>{props.errors.body}</Text>


          </View>
        )}
      </Formik>

Answer 1

您可以尝试将对象参数更改为形状吗？
并在 require 方法中插入参数 message ?

例如：

Yup.object().shape({title: Yup.string().required("Please Insert")});

如果不行，你可以尝试改变

handleChange()

到

setFieldValues(fieldName,value) //Definitely From Formik props

并制作一些用于验证的 handleSubmit（用于检查 validateOnSubmit，尽管使用 validateOnBlur 可以）。先谢谢了。

Answer 2

我忘记在 Reviewschema 中创建一个对象，而是创建了很多对象

正确方法如下

const ReviewSchema = yup.object({
  title: yup.string().required().min(2),

  body: yup.string().required().min(3),


});

Answer 3

 const initialValues = { email: '', password: '', capcha: '' };

 const validationSchema = Yup.object().shape({
    email: Yup.string()
      .required("please! email?")
      .email("well that's not an email"),
    password: Yup.string()
      .required("please! PASSWORD?")
      .min(4, "pretty sure this will be hacked"),
    capcha: Yup.string()
      .required("please! capcha?")
      .min(5, "pretty sure capcha is correct?")
  });

 return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values, actions) => {

        console.log("Submitted: ", JSON.stringify(values));
        // actions.setSubmitting(false);

        setTimeout(() => { actions.setSubmitting(false) }, 1000);


      }}
    >
      {(props) => (

        <View>
          {console.log(" ____retutn ______ " + JSON.stringify(props))}
          <TextInput
            placeholder='Email'
            onChangeText={props.handleChange('email')}
            value={props.values.email}
            name="email" // added this
            type="email"
            setFieldTouched='email'
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
            returnKeyType="next"
            onBlur={() => props.setFieldTouched('email')}
          />

          {
            props.touched.email && props.errors.email && (
              <Text style={{ fontSize: 30, color: 'red' }}>{props.errors.email}</Text>
            )
          }

          <TextInput
            placeholder='Password'
            onChangeText={props.handleChange('password')}
            value={props.values.password}
            name="password" // added this
            type="password"
            returnKeyType="next"
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
          />

          {
            props.touched.password && props.errors.password && (
              <Text style={{ fontSize: 30, color: 'red' }}>{props.errors.password}</Text>
            )
          }
          <TextInput
            placeholder='CAPCHA (1-5)'
            onChangeText={props.handleChange('capcha')}
            value={props.values.rating}
            name="email" // added this
            type="capcha"
            returnKeyType="done"
            placeholderTextColor='grey'
            underlineColorAndroid="grey"
          />
          {
            props.touched.capcha && props.errors.capcha && (
              <Text style={{ fontSize: 30, color: 'red', marginBottom: 20 }}>{props.errors.capcha}</Text>
            )
          }
          
          <Button
            style={{ margin: 20 }}
            title='Submit'
            color='red'
            onPress={props.handleSubmit}
            disabled={props.isSubmitting}
          />
          
        </View>

      )}


    </Formik>
  )

React Native，不显示来自 Formik-Yup 验证的错误

React Native, Errors from Formik-Yup validation is not displaying

react-native

yup

formik