Formik и ReactJs: SetFieldValue от дочернего до родительского компонента

Question

Я работаю над ReactJs проектом и использую в нем formik.

У меня есть 2 разных компонента (родительский и дочерний).

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

Прямо сейчас я сталкиваюсь с ошибкой, так как мой родительский компонент вызывает дочерний элемент, и когда дочерний элемент обновляет родительское значение, он снова вызывает ребенок и уходит в бесконечность l oop.

родитель. js

<GSTData gstData={this.props.gstDetails?.GstDetails} 
  amount={this.props.totalAmount}
  onInputControlChange={(Total, GstData) => {
    TotalBillAmount = Total;
    GstDetails = GstData;
    console.log('Total', TotalBillAmount)
    //setFieldValue('NetOutStanding', 1);
  }}
  values={values}
  setFieldValue={setFieldValue}
/>

ребенок. js

componentDidUpdate(){
  this.props.onInputControlChange((this.GSTTotal + this.props.amount), this.GstDetails);
  this.props.setFieldValue('NetOutStanding', (this.GSTTotal + this.props.amount));
}

Answer 1

Что происходит, когда вы обновляете ввод, он вызывает родителя со значением для установки. Затем родитель передает это значение обратно ребенку как реквизит, который Ребенок воспринимает как обновление, которое затем сообщает родителю значение снова ..... таким образом, бесконечно l oop

Я бы попробовал взятие

this.props.setFieldValue('NetOutStanding', (this.GSTTotal + this.props.amount));

из componentDidUpdate в дочернем компоненте и вызов его из его собственной функции. (Это означает, что вам также нужно будет установить значение входного передается от родителя напрямую). Это должно разорвать цикл