javascript - Formik 和 ReactJs : SetFieldValue from child to parent component

Question

我正在做一个 ReactJs 项目，我在其中使用了 formik。

我有 2 个不同的组件(父组件和子组件)。

这是示例，我试图将 formik 数据从父级传递给子级，我需要从子组件设置父级 formik 值。

现在我遇到一个错误，因为我的父组件调用子组件，当子组件更新父值时，它将再次调用子组件并进入无限循环。

Parent.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}
/>

Child.js

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

Answer 1

发生的事情是，当您更新输入时，它会使用要设置的值调用父级。 parent 然后将该值作为 Prop 传回给 child ， child 将其视为更新，然后再次告诉 parent 该值.....因此无限循环

我会尝试服用

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

从子组件的 componentDidUpdate 中调用它并从它自己的函数中调用它。(这意味着您还必须设置直接从父组件传入的输入值)。那应该打破循环