javascript - 嵌套在第三方组件中时 Field 的 Formik 包为空

Question

我正在使用 Formik 的 Field组件来呈现这样的输入:

<Formik 
  initialValues={initialValues}
  onSubmit={onSubmit}
  render={formProps => (
    <Form>
      <Field name="lastName" render={({ field, form }) => (
        <input {...field} placeholder="lastName" />
      )} />
    </Form>
)} />

这是一个CodeSandbox这说明了这个问题。您会看到，如果将产品列定义与仅将产品呈现为字符串而不是使用 Formik 输入的定义交换，它工作正常。

在上面的代码中，Formik 似乎“自动”确定了 Formik 包 form Field 中的对象的 render功能。

在我集成我的 Field 之前，这一直没有问题进入第三方库，在我的例子中，将其呈现在 agGrid 表的单元格中。当我这样做时，我得到 TypeError: this.props.formik.registerField is not a function 浏览器控制台错误。调试此错误，我在 Formik 的编译代码中看到以下内容:

FieldInner.prototype.componentDidMount = function () {
  this.props.formik.registerField(this.props.name, this);
};

当我检查 this.props.formik这应该是我的 Formik 包，它是一个空物体。这与我在 Field 中放置断点时看到的对象相同的 render功能。当我检查此对象以查找我的 Field 实例时在 agGrid 之外，它是完全填充的 Formik 包，包括 initialValue Prop ，registerField功能等

为什么 Formik 没有正确检索 Formik 包 form反对我的Field嵌套在 agGrid 表格单元格中，我该如何解决这个问题？

Answer 1

您使用的 React 版本是否 >=16？如果是这样，AgGridReact 似乎不支持 Formik 在幕后使用的新版本上下文 API。

https://github.com/ag-grid/ag-grid-react/issues/131

要么等待 AgGridReact 发布新版本，要么考虑降级到 React <16 版本，以便 Formik 回退到旧的上下文 api。