javascript – 当嵌套在第三方组件中时,Field的Formik包是空的

我正在使用Formik的Field组件来渲染这样的输入：

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

这是一个说明问题的CodeSandbox.您将看到是否将产品列定义与仅将产品呈现为字符串而不是使用Formik输入的产品列定义交换,它可以正常工作.

在上面的代码中,Formik似乎是“自动地”确定Field的渲染功能中的Formik包形式对象.

在我将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的渲染功能中使用断点时看到的对象相同.当我在agGrid之外检查这个对象的Field的实例时,它是完全填充的Formik包,包括initialValue props,registerField函数等.

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

解决方法:

您使用的是React> = 16的版本吗？如果是这样,看起来AgGridReact不支持Formik在幕后使用的新版本的上下文API.

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

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

标签：javascript,reactjs,formik
来源： https://codeday.me/bug/20190522/1152421.html