当嵌套在第三方组件中时,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不是函数浏览器控制台错误.调试此错误,我在Formik的编译代码中看到以下内容:

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

当我检查this.props.formik哪个应该是我的Formik包时,它是一个空物体.这是同一个对象我看到,当我把我的破发点中Field的render作用.当我检查这个对象以获取我Field的agGrid外部的实例时,它是完全填充的Formik包,包括initialValue道具,registerField功能等.

form当我Field的嵌套在agGrid表格单元格中时,为什么Formik无法正确检索Formik包对象？如何解决此问题？

Answer 1

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

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

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