Problem: We often use setFieldsValue in antD forms to set values for form echo; But sometimes it doesn't go so well. I personally have encountered similar problems when writing code or fixing bugs in other people's code.

The following is the process from problem discovery to problem resolution

  useEffect(() => {
    if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
  }, [statusId]);
Copy the code

But the select box doesn’t change anything; — (at this time suspect data format problem)

Procedure 1: Doubt the data format

So I changed the data format:

{flowStatus: 1} becomes {flowStatus:'1'};
Copy the code

That is, converting a number to a string still does not echo. — (if the value is not assigned)

Procedure 2: Suspect no assignment

To verify that the value is assigned, print it out

   useEffect(() => {
    if (statusId) {
        form.setFieldsValue({flowStatus: 1});
        console.log('flowStatus', form.getFieldValue('flowStatus'))
      }
  }, [statusId]);
Copy the code

You can see that the flowStatus has a value but there is still no echo; So it’s kind of weird, you name the value, you get the value, why is there no echo; Antd is bugged. — (AntD bug?)

Process 3: Rethink — despair

Are there any other apis that change the value that I assign, and are there any apis that appear? form.resetFields(); It also changes that value, so go see where the API is used; So I found this piece of code

  useEffect(() => {
    if(formConfigListValues. Length = = = 0) {/ / todo can't use this judgment form. ResetFields (); } }, [formConfigListValues]);Copy the code

If you look at this code, there’s about a 90% chance that this is the problem; Let’s print it and verify

Conclusion: As expected, the value was reset after reassignment, resulting in no echo;

Procedure 4: The command output is successful, with some flaws

I found the problem, so how do I write it. Here’s my code;

  useEffect(() => {
    if (formConfigListValues.length === 0) {
      form.resetFields();
      if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
    }
  }, [formConfigListValues, statusId]);
Copy the code

My personal reflections are

  • 1:resetFields API is used only once, it is better to put it in useEffect here.
  • 2. Put setFieldsValue and resetFields together to facilitate later maintenance and reduce the cost of others to modify the code;

But this is wrong; Because formConfigListValues is performed once every time the form is completed, the approval status remains unchanged. Running results:

The end result: the cloud clears, the truth comes out

The final code looks like this:

  useEffect(() => {
    if (formConfigListValues.length === 0) {
      form.resetFields();
    }
  }, [formConfigListValues]);
  
  useEffect(() => {
      if (statusId) {
        form.setFieldsValue({flowStatus: 1});
      }
  }, [statusId]);
Copy the code

Finally think about it when we use setFieldsValue of the Antd form in the Hooks component,

  • 1: Is the data format wrong (value should be a string or a number)
  • 2: If the data format is correct but there is no echo, think about what else might affect the set value (e.g., resetFields).
  • 3: use setFieldsValue in hooks, pay attention to the sequence and hierarchy of the code (e.g., put the new setFieldsValue inside or outside, and put it under useEffect where resetFields are located).