CODEWITHSUNDEEP
reactjsantd
coinhndp
coinhndp

Reputation: 2471

setFieldsValue does not re-render form value

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

Upvotes: 1

Views: 15634

Answers (3)

Aleksey Efimov
Aleksey Efimov

Reputation: 1

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)}

Upvotes: 0

Nemanja Lazarevic
Nemanja Lazarevic

Reputation: 1047

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>

Upvotes: 7

coinhndp
coinhndp

Reputation: 2471

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

Upvotes: 0

Related Questions