setFieldsValue does not re-render form value

Question

This is a silly example. Let's say I have 2 items in the form (gender and age). If age > 18 then gender should be boy else gender should be a girl.

If I change the age by inputting a new value to the number input, everything works as expected. However, if I change the age by clicking on the button, my app does not work. Could you guys help me on this? I would like the gender is updated as well when clicking on the button

https://codesandbox.io/s/upbeat-montalcini-wlt61?file=/src/App.js

Steps to reproduce

Click on button

What is expected? Age is changed to 25, gender is changed to Boy

What is actually happening? Age is changed to 25, gender is not changed

Nemanja Lazarevic · Accepted Answer · 2020-12-18 08:49:27Z

The main issue is that there is no follow-up rerenders of your child component.

It would appear that calling setFieldsValue nor interacting with input fields would cause a rerender. To confirm that you can put a simple console.log in your App.js and see that it won't print no matter how you interact with the form fields, or calling setFieldsValue.

The reason why it's working in your example in case of interacting with the form field manually is that you have specified a dependency array of dependencies={["age"]} on <Form.Item />. Which will cause a rerender when manually interacting with the form.

In order to fix the issue you can use shouldUpdate to compare the age changes.

 <Form.Item noStyle shouldUpdate={(prevValues, curValues) => prevValues.age !== curValues.age } > {(form) => { return <Gender form={form} />; }} </Form.Item>

Interesting! My form has hundreds of fields so I think it would be good if I set something to my dependencies. It's good to know that an empty array works. Thank you for this info! Not sure what should be the right way to update the form.
Can you be more specific? The right way to update the form in which use cases?
I mean I want to update the age which results in updating the gender as well. The solution is to add shouldUpdate prop to the form Item (check the codesandbox to see)

coinhndp · Accepted Answer · 2020-12-18 07:27:33Z

0

To make the form rerender, add shouldUpdate prop to the Form.Item. Check this codesandbox: https://codesandbox.io/s/sweet-vaughan-1qe2h?file=/src/App.js

answered Dec 18, 2020 at 7:27

coinhndp

2,50111 gold badges40 silver badges74 bronze badges

3 Comments

Nemanja Lazarevic Over a year ago

This actually causes double renders. And it's not recommended by official docs. dependencies shouldn't be used together with shouldUpdate. Since it may cause chaos in updating logic.

coinhndp Over a year ago

It's true. Then what would you recommend?

coinhndp Over a year ago

Now, I just remove the dependencies and add this the should update. Could you check the sandbox again

Aleksey Efimov · Accepted Answer · 2024-08-09 09:24:04Z

Add key to form helped in my case

<Form onFinish={props.onFinish} layout="inline" form={props.form} className="w-full" fields={props.formFields} key={JSON.stringify(props)}

Collectives™ on Stack Overflow

setFieldsValue does not re-render form value

3 Answers 3

3 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Related