formik v1.5.2, yup v0.27.0, react v16.8.6
我无法在 Formik 中使用对象数组进行 Yup 验证。代码位于代码沙盒 https://codesandbox.io/s/kw1r49v25o?fontsize=14
初始值:
const INITIAL_VALUES = {
users: [
{
value: "admin"
}
]
};
是的模式:
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>
);
}
并且页面上没有错误。我希望在输入中添加新字符时看到字符串化错误和 isValid = false。
您的 Yup 模式是正确的,只是道具名称不正确。应该是validationSchema
而不是validateSchema
.
请注意,由于您没有用于users[1]
的字段,因此表单将永远不会像现在这样有效(因为"迅猛龙"超过三个字符(。但您可能已经意识到这一点,并以这种方式设置示例。