Сумка Formik Field пуста, когда вложена в сторонний компонент - PullRequest
0 голосов
/ 24 января 2019

Я использую компонент 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 и т. Д.

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

1 Ответ

0 голосов
/ 28 января 2019

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

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

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

...