Сумка Formik Field пуста, когда вложена в сторонний компонент

Question

Я использую Формик 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 "s 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 "s render функция. Когда я проверяю этот объект на наличие экземпляров моего Field вне agGrid, это полностью заполненная сумка Formik, включающая initialValue реквизит, registerField функция и т. д.

Почему Formik неправильно извлекает сумку Formik form объект, когда мой Field находится в ячейке таблицы agGrid и как я могу решить эту проблему?

Answer 1

Вы используете версию React >=16? Если так, то похоже, что AgGridReact не поддерживает новую версию API контекста, которую Formik использует за кулисами.

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

Либо подождите, пока AgGridReact выпустит новую версию, либо рассмотрите возможность понижения до версии React <16, чтобы Formik вернулся к старому контекстному API.