Question

我正在研究ReactJs项目，并且在其中使用了formik。

我有两个不同的组成部分（父母和孩子）。

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

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

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

正在发生的事情是，当您更新输入时，它将使用要设置的值调用父级。然后，父级将该值作为道具传递回子级，子级将其视为更新，然后更新将其告知父级.....从而无限循环

我会尝试

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

在子组件中的componentDidUpdate中

并从其自己的函数中调用它（这意味着您还必须设置直接从父级传入的输入的值）。那应该打破周期

Formik和ReactJs：从子组件到父组件的SetFieldValue

1 个答案: