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

【问题标题】：Formik and ReactJs : SetFieldValue from child to parent componentFormik 和 ReactJs：从子组件到父组件的 SetFieldValue
【发布时间】：2020-07-05 21:53:30
【问题描述】：

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

我有 2 个不同的组件（父组件和子组件）。

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

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

父.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));
}

【问题讨论】：

标签： javascript reactjs redux formik

【解决方案1】：

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

我会尝试服用

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

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

【讨论】：