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