Form data updates not reflecting on elements

[MatteoBuffo]

Reproduction link

Steps to reproduce

Starting from this example in the docs, I built a form where every field requires a "translations" object: the user is expected to provide a localized description of all fields for each of the provided languages (IT/Italian and EN/English in my code). For instance, for the field named name you are expected to have:

{
	name: "subjects",
	translations: {
		IT: "Materie scolastiche",
		EN: "School subjects"
	}
}

Explanation:

• The page is made of two columns: the left one shows the form, the right one a preview of its content.
• The form is made of a <Form.Item> field called name and a <Form.List> called items. The desired form content should be something like this:

  
  name: "subjects",
  translations: {
  	IT: "Materie scolastiche",
  	EN: "School subjects"
  },
  items: [
  {
  	name: "maths",
  	translations: {
  		IT: "Matematica",
  		EN: "Maths" 
  	}
  },
  {
  	name: "cs",
  	translations: {
  		IT: "Informatica",
  		EN: "Computer Science"
  	}
  },
  {
  	name: "history",
  	translations: {
  		IT: "Storia",
  		EN: "History"
  	}
  },
  	...
  ]
  
  

• Every field is an antd <Input> component.
• Every translation is an antd <TextArea> component.
• Every <Input> contains a postfix (assigned via the addonAfter prop) component called <CommonPostfix>.
• The <CommonPostfix> is a component that shows, for a specified field, how many translations out of the of the provided languages the user provided for that field. By pressing the component, a <Modal> containing the translation <TextArea>s is shown.

Steps:

1. Type something inside the name field. The form preview is updated accordingly.
2. Press the name field postfix to open its translations modal.
3. Notice the title of the modal showing the value of the name field.
4. Adjust your zoom so that you can look at the modal, at the name postfix and the form preview at the same time.
5. Type something inside the IT/EN field. As soon as you do it, the postfix and the form preview are updated accordingly.
6. Close the modal.
7. Press the Add item button. The items property is correctly added to the form preview.
8. Type something inside the first items field (items[0] from now on). The form preview is updated accordingly.
9. Press items[0] field postfix to open its translations modal.
10. Notice the title of the modal NOT showing the value of items[0].
11. Type something inside the IT/EN field. As soon as you do it, the form preview is updated accordingly, but the postfix always shows 0 out of 2.

Any idea on this? Thank you in advance!

What is expected?

I expect both the <Modal> title and the postfix content to update correctly.

What is actually happening?

What is actually happening is explained in the steps 10. and 11.

Environment	Info
antd	5.21.2
React	^18.3.1
System	Windows
Browser	Chrome 130

[MatteoBuffo]

Posting an additional video for clarification of what I described above.

https://github.com/user-attachments/assets/cb0a0d3b-50ad-4424-9852-04c80c232f9b

[zombieJ]

You can not call form.getFieldValue in render phase. It will not update when form values change. All the dynamic part in form data should wrapped in Form.Item shouldUpdate or Form.useWatch

[MatteoBuffo]

@zombieJ

You can not call form.getFieldValue in render phase. It will not update when form values change.

What should I call instead?

All the dynamic part in form data should wrapped in Form.Item shouldUpdate or Form.useWatch

Ok, I will try to give the shouldUpdate prop to every Form.Item.