Доступ к обновленным FormikProps после запуска функции arrayHelper - PullRequest
Новая
       6

Доступ к обновленным FormikProps после запуска функции arrayHelper

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

У меня есть следующий код: 

  addLineItem = (formProps: FormikProps<MyEntity>, arrayHelpers: ArrayHelpers) => {
    arrayHelpers.push(getNewEntity(formProps.values.date));
    reassignLineItemIds(formProps);
  };

Проблема, с которой я сталкиваюсь, заключается в том, что reassignLineItemIds нужны обновленные значения в formProps, и у меня нет доступа к обновленной версии formProps после запуска arrayHelpers.push().

Одно решение, с которым я столкнулся, заключалось в создании следующего компонента: 


interface ConnectedProps {
  delay?: number;
  onChange: (prevProps: FormikProps<MyEntity>, nextProps: FormikProps<MyEntity>) => void;
}

interface OwnProps extends ConnectedProps {
  formik: FormikProps<FormikValues>;
}

class FormChangeHandler extends Component<OwnProps> {
  onChange = debounce(this.props.onChange, this.props.delay || 0);

  componentDidUpdate(prevProps: OwnProps) {
    const { formik } = this.props;
    const { isValid } = formik;

    const hasChanged = !isEqual(prevProps.formik.values, formik.values);
    const shouldCallback = isValid && hasChanged;

    if (shouldCallback) {
      this.onChange(prevProps.formik as FormikProps<MyEntity>, formik as FormikProps<MyEntity>);
    }
  }

  render() {
    return null;
  }
}

const connected = connect<ConnectedProps>(FormChangeHandler);

export { connected as FormChangeHandler };

Затем в моем Formik <Form> включите следующее: 

<FormChangeHandler onChange={
    (prevProps: FormikProps<MyEntity>, nextProps: FormikProps<MyEntity>) => {
        if (getLineItemCount(prevProps.values) !== getLineItemCount(nextProps.values)) {
        reassignLineItemIds(nextProps);
    }
}} />

Это работает, но оно будет иметь негативное влияние на производительность и кажется просто сумасшедшим обручем, через который можно прыгнуть.

1 Ответ

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

Лучшее решение до сих пор выглядит как взлом, и это заключается в использовании проверок. Проверки запускаются при вызове (некоторых) помощников массива, так что механизм может использоваться в качестве обратного вызова при обновлении состояния. Все еще не идеальное решение, но похоже, что это самое близкое из доступных на данный момент решение.

...