<ErrorMessage /> 尽管函数调用无效

Question

我正在使用 Formik 构建一个简单的表单。

在我的 validation 方法中，我检查字段中是否输入了名称。如果没有，那么我打印到控制台 - 工作正常。

validate={values => {
  let errors = [];

  if (!values.name) {
    console.log("no name entered");
    errors.name = "First name required";
  }

  //check if my values have errors
  return errors;
}}

但是，<ErrorMessage />组件在满足上述条件时什么都不做：

  <Field
    type="text"
    name="name"
    placeholder="First Name"
  />
  <ErrorMessage name="name" />

这是为什么？

Codesandbox

Answer 1

问题是您有 let errors = []; 而不是 let errors = {};。

<ErrorMessage /> 尽管函数调用无效

<ErrorMessage /> doesn't work despite function call

validation

reactjs

formik