Reactjs Formik在对象数组中未发现Yup验证错误

Reactjs Formik在对象数组中未发现Yup验证错误,reactjs,formik,yup,Reactjs,Formik,Yup,formik v1.5.2,yup v0.27.0,react v16.8.6 我无法使用对象数组在Formik中进行Yup验证。代码在codesandbox上 初始值: const INITIAL_VALUES = { users: [ { value: "admin" } ] }; Yup模式: const usersSchema = Yup.object().shape({ users: Yup.array().of( Yup.object

formik v1.5.2,yup v0.27.0,react v16.8.6

我无法使用对象数组在Formik中进行Yup验证。代码在codesandbox上

初始值:

const INITIAL_VALUES = {
  users: [
    {
      value: "admin"
    }
  ]
};
Yup模式:

const usersSchema = Yup.object().shape({
  users: Yup.array().of(
    Yup.object().shape({
      value: Yup.string()
        .max(3)
        .required()
    })
  )
});
我故意将字符串大小限制为3个字符以引发验证错误

组成部分:

function App() {
  const [data, setData] = useState(INITIAL_VALUES);
  useEffect(() => {
    setData({
      users: [
        {
          value: "trex"
        },
        {
          value: "velociraptor"
        }
      ]
    });
  }, []);

  return (
    <div className="App">
      <Formik
        initialValues={data}
        enableReinitialize={true}
        validateOnChange={true}
        validateSchema={usersSchema}
        render={({ values, errors, touched, isValid, isValidating }) => {
          console.log("render - isValid", isValid);
          console.log("render - isValidating", isValidating);
          console.log("render - errors", errors);
          return (
            <Form>
              <Field name="users[0].value" />
              <div>{`isValid = ${isValid}`}</div>
              {Object.keys(errors) > 0 ? (
                <div>{`Error: ${JSON.stringify(errors)}`}</div>
              ) : null}
            </Form>
          );
        }}
      />
    </div>
  );
}
函数应用程序(){
const[data,setData]=使用状态(初始值);
useffect(()=>{
设置数据({
用户:[
{
价值:“特雷克斯”
},
{
值:“velociraptor”
}
]
});
}, []);
返回(
{
log(“render-isValid”,isValid);
log(“render-isValidating”,isValidating);
log(“呈现错误”,错误);
返回(
{`isValid=${isValid}`}
{Object.keys(错误)>0(
{`Error:${JSON.stringify(errors)}`}
):null}
);
}}
/>
);
}

页面上没有错误。当我在输入中添加新字符时,我希望看到字符串化错误和isValid=false

您的Yup模式是正确的,只是道具名称不正确。它应该是
validationSchema
而不是
validateSchema


请注意,由于您没有用于
用户[1]
的字段,表单将永远不会像现在这样有效(因为“velociraptor”超过三个字符)。但是你可能已经意识到了这一点,只是用这种方式来设置示例。

你的Yup模式是正确的,只是道具名称不正确。它应该是
validationSchema
而不是
validateSchema

请注意,由于您没有用于
用户[1]
的字段,表单将永远不会像现在这样有效(因为“velociraptor”超过三个字符)。但你可能已经意识到了这一点,并以这种方式树立了榜样