Formik <FieldArray>initialValue не определено, если используется componentDidMount / setState - PullRequest
Новая
       1

Formik <FieldArray>initialValue не определено, если используется componentDidMount / setState

0 голосов
/ 24 марта 2019

Я никогда раньше не пользовался Formik, но, услышав позитивные вещи в сети, звучит так, будто это отличное решение по сравнению с собственным ... что я обычно пытаюсь сделать.

Документы для Formikиметь простой, единственный экземпляр некоторых из их атрибутов, таких как initialValues и validationSchema.Тем не менее, я должен сделать это многоразовым, так как у меня есть 2 версии этого в моем приложении.Поэтому я хочу передать поля в качестве реквизита, а затем создать initialValues как форму состояния.Это нормально, да?

Однако ничего не отображается ... параметры value, errors, показанные в документах, всегда отображаются как undefined.Почему это?Состояние обновляется, и поэтому я предполагаю, что initialValues обновит объект values.Область применения метода render не позволяет мне использовать, например, this.state.initial ... Объект ошибок остается неопределенным, но я думал, что он должен хотя бы существовать?

По сути, у меня есть родительский объекткомпонент, разыскивающий внутренние компоненты, один из которых является группой форм.Поэтому я передаю массив полей и объект схемы контейнеру компонента Formik следующим образом: 

const newCompanyFields = ["name", "address", "revenue", "phone"];

<Card
  headerText="Create New Company"
  id="new-company"
  renderWith={() => (
    <React.Fragment>
      <div className="header">Add Company</div>
      <Forms fields={newCompanyFields} schema={NewCompanySchema} />
    </React.Fragment>
  )}
/>

Затем внутри компонента <Forms> мы создадим экземпляр Formik следующим образом: 

class Forms extends Component {
  state = {
    initial: {}
  };

  componentDidMount() {
    //  we need to get the list of fields and setState to be used by Formik below
    if (this.props.fields) {
      let initialItems = {};
      this.props.fields.forEach(item => {
        return (initialItems[item] = "");
      });

      this.setState({ initial: initialItems });
    }
  }

  render() {
    return (
      <StyledForms>
        <Formik
      initialValues={this.state.initial}
      validationSchema={this.props.schema}
      onSubmit={values => {
        console.log(values, " submitted");
      }}
      render={({
        values,
        errors,
        touched,
        handleBlur,
        handleChange,
        handleSubmit,
        isSubmitting
      }) => (
        <Form>
          <FieldArray
            name="field-company"
            render={() => (
              <div>
                {values &&
                  Object.keys(values).map((field, index) => (
                    <div key={index}>
                      <Field name={field} />
                      {errors[field] && touched[field] ? (
                        <div>{errors[field]}</div>
                      ) : null}
                    </div>
                  ))}
                <button type="submit" disabled={isSubmitting}>
                  Submit
                </button>
              </div>
            )}
          />
        </Form>
      )}
    />
   </StyledForms>
    );
  }

Скриншот ссылки на консоль: https://screencast.com/t/Pt7YOxU1Oq57

Спасибо за разъяснения.

ОБНОВЛЕНИЕ Если я обновлю свой атрибут initialValues, чтобы НЕ полагаться насостояние компонента, оно работает. 

// assume ComponentDidMount from above is removed now
const getInitialValues = passedFields => {
  let initialItems = {};
  passedFields.forEach(item => {
    return (initialItems[item] = "");
  });
  return initialItems;
};

<Formik
          initialValues={getInitialValues(this.props.fields)}
...
/>

Ожидается ли это?

1 Ответ

0 голосов
/ 24 марта 2019

Вам необходимо использовать render() в вашем Formik компоненте.

Что-то вроде: 

<Formik render={({ values }) => {
  <Form>
    <FieldArray>
      ... use values
    </FieldArray>
  </Form>
}} />
...