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

问题描述 投票:0回答:1

我正在研究ReactJs项目,并在其中使用formik。

我有两个不同的部分(父母和孩子)。

这里是示例,我试图将父代的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));
}
javascript reactjs redux formik
1个回答
0
投票

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

我会尝试服用

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

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

© www.soinside.com 2019 - 2024. All rights reserved.