我正在研究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));
}
发生的情况是,当您更新输入时,它将使用要设置的值调用父级。然后,父级将该值作为道具传递回子级,子级将其视为更新,然后更新将其告诉父级该值.....从而无限循环
我会尝试服用
this.props.setFieldValue('NetOutStanding', (this.GSTTotal + this.props.amount));
在子组件的componentDidUpdate
中,并从其自己的函数调用它。(这意味着您还必须设置直接从父组件传入的输入的值)。那应该打破周期