React,antd uses setFieldsValue forms to backfill an endless loop

< H2 > Business scenario < / H2 >

A table, can be modified for each tr. The modification is to pop up a
< Modal destroyOnClose modifyData= {data} / > , and a Form in the
Modal. Here, use setFieldsValue to backfill the form. Since Modal, is mounted when the page is initialized, componentDidMount () is only run once.

< H2 > process < / H2 >

so I called this.props.form.setFieldsValue (this.props.modifyData) in the componentWillReceiveProps (), shouldComponentUpdate (), render (), componentDidUpdate (), lifecycle, respectively. The result of
running is that not only does the pop-up not open, it also creates an endless loop.

< H2 > question < / H2 >
  1. Why does this happen? doesn"t the document say it will cause an endless loop in componentWillReceiveProps ()? Why do I do it in the rest of my life cycle?
  2. what is the idea of backfilling a form in this scenario using antd"s form. My understanding is that similar to VUE"s watch , I just need to know that this.props.modifyData has changed, and then execute setFieldsValue to dynamically change the value of the form. However, react doesn"t seem to have features like watch , so I have to use it during the lifecycle. (ps: found that turning modal, on and off triggers the life cycle of update.)
    I don"t know if this understanding is correct
Antd react.js
Mar.07,2021

setFieldsValue execute

in your Modal determination function.

you want to be complicated.
I understand that you just want to give a table to edit: click a line, pop up the modal, and edit, click OK to close the modal. Let the modified data render into table. Right?

if so, there are no scenarios that require setFieldsValue at all, nor several lifecycles that require React.

have you read the document? Your scene can be satisfied:
https://ant.design/components.

1. Because the form of antd is bound to the props of the component. So you directly in componentWillReceiveProps setFieldsValue will trigger componentWillReceiveProps, enter the endless loop
2. In render, setFieldsValue will also enter an endless loop

finally use mapPropsToFields to solve the problem of form backfilling

< Modal destroyOnClose modifyData= {data} destroyOnClose= {true} / >, and then modify it in componentDidMount.

destroy child elements in Modal when destroyOnClose is closed

The

setFieldsValue official documentation also makes it clear that you should not set it in componentWillReceiveProps, or you will fall into an endless loop! Because what you operate is props;, as soon as the props changes, go back to execute the componentWillReceiveProps method!

Previous: What should be done with low-frequency option options?

Next: If the mobile phone monitors the input box, enter the @ character?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu