Reactjs 渲染后如何在formik中触发验证？

我有一个关于福米克的问题。基本上，我将有一个表，列出所有有错误的表单Id。当用户单击表单Id时，它将显示表单本身。要求是在呈现表单时也应显示错误。有人知道如何使用Formik实现这一点吗？此外，如果用户编辑字段，则字段验证应正常工作

我把代码沙盒链接放在这里。基本上，我希望当表单出现时，我应该看到错误，而不仅仅是当用户离开字段或更改字段时。多谢各位

import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";

class Post0 extends React.Component {
   validateEmptyName(value) {
      if (!value) {
        return "Invalid Name";
      }
   }

 render() {
  return (
  <div>
    <Formik
      initialValues={{
        email: "",
        animal: ""
      }}
      onSubmit={values => {
        this.props.nextStep(values);
      }}
      render={({ values, isSubmitting }) => (
        <Form>
          <Field
            name="email"
            type="email"
            value={values.email}
            component={TextField}
            variant="outlined"
            validate={this.validateEmptyName}
          />
          <Field
            name="animal"
            value={values.animal}
            component={TextField}
            variant="outlined"
          />

          <button type="submit">Submit</button>
        </Form>
      )}
    />
  </div>
);

从“Formik”导入{Formik，Field，Form}；
从“formik材质ui”导入{TextField}；
类Post0扩展了React.Component{
validateEmptyName（值）{
如果（！值）{
返回“无效名称”；
}
}
render（）{
返回(
{
this.props.nextStep（值）；
}}
render={（{values，isSubmitting}）=>(
提交
)}
/>
);

} }我使用自定义输入组件制作了一个版本。Formik没有内置选项，因此不幸的是，您需要创建自己的字段组件，以与Formik的道具集成，并绕过在未触及表单时不会显示验证的逻辑

const Input = ({ field, form }) => {
  useEffect(() => {
    form.validateForm();
  }, []);

  return (
    <div>
      <input
        style={{
          border: form.errors[field.name] ? "1px solid red" : "1px solid #ccc"
        }}
        name={field.name}
        value={field.value}
        onChange={field.onChange}
      />
      {form.errors[field.name] && (
        <span style={{ color: "red" }}>{form.errors[field.name]}</span>
      )}
    </div>
  );
};

const输入=（{field，form}）=>{
useffect（（）=>{
form.validateForm（）；
}, []);
返回(
{form.errors[field.name]&&(
{form.errors[field.name]}
)}
);
};

然后将其作为

组件
道具传递到

Formik确实提供了一个
isInitialValid
道具，您可以在主Formik组件上将其设置为
false
，但同样，如果没有触摸
道具，您使用的库文本字段将不会显示任何内容。
2021更新：

使用
validateOnMount
prop:

我在从查询字符串填充表单的初始值时，使用Yup完成了这项工作


函数生成初始值（选项卡：TabType[]，路由器：任意，验证模式：任意）{
常量初始值：{[key:string]：number | string}={}；
_.forEach（制表符，（制表符：制表符类型）=>{
_.forEach（tab.formFields，（f:FormField）=>{
让isfield有效；
试一试{
// https://github.com/jquense/yup#mixedvalidatesyncatpath-字符串值任意选项任意对象任意
log（'validationSchema validateAt:'，validationSchema.validateSyncAt（f.id，router.query[f.id]）；
isFieldValid=validationSchema.validateSyncAt（f.id，router.query[f.id]）；
}捕获（e）{
//不要故意阻止抛出异常
/todo:考虑在这里做一些事情，比如记录一个度量
}
initialValues[f.id]=isFieldValid？路由器。查询[f.id]：f.defaultValue；
})
});
返回初始值；
}
我可以问一下，为什么要验证一个已知为空的表单？简单地指出该字段是必需的，这可能更有意义、更易于实现、更具视觉吸引力。嗨@RutherfordWonkington，很抱歉混淆了，这只是一个例子。InitialState不能为空。例如，“email'=''和“animal'='cat'。但是当我显示表单时，我希望看到错误显示在那里。这里的用例是有一个带有表单ID的表存在验证错误。当用户单击一个ID时，会显示有验证错误的表单。谢谢。你现在的结构可能很困难。FormikProps有一个
validateForm
方法，但在子渲染函数中调用它将触发无限循环。此外，由于您使用库组件作为接受Formik道具的输入，因此需要确保字段将显示验证消息，而无需先触摸。