correct-apricot•2w ago

Warning: There may be circular references

It seems when using form.setFieldValue() method on a form created with useForm(), I got this error : "Warning: There may be circular references"

2 Replies

kapa.ai•2w ago

Hi @quick691. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The warning about circular references you're experiencing with form.setFieldValue() in refine's useForm() hook is a known issue that can occur when working with JSON data in forms. This warning typically appears when there are circular references in the data structure you're trying to set. In JavaScript, circular references occur when an object refers to itself either directly or through a chain of references. JSON doesn't support circular references, which is why you're seeing this warning. Best Practices to Avoid Circular References When working with forms in refine, here are some approaches to avoid this issue: 1. Get Rid of Circular References: Make sure your objects don't contain circular references before using them with setFieldValue().

const obj = {};
obj.a = obj; // Circular reference
JSON.stringify(obj); // This is going to throw an error

const obj = {};
obj.a = obj; // Circular reference
JSON.stringify(obj); // This is going to throw an error

2. Use a Replacer Function: You can use a replacer function to exclude problematic properties or transform values before serialization.

const data = {
  name: "John",
  password: "secret",
};

const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined;
  return value;
});

const data = {
  name: "John",
  password: "secret",
};

const jsonString = JSON.stringify(data, (key, value) => {
  if (key === "password") return undefined;
  return value;
});

3. Validate Your JSON Data: Always validate your data structure before setting form values to ensure it's well-formed. Refine Blog: Unexpected token in JSON at position 0 error Alternative Approaches If you're still experiencing issues, you might want to consider: 1. Using Controller Component with Key: When using multiple <Controller> components, make sure to provide unique keys to prevent fields from getting linked to each other, which can cause unexpected behavior. 2. Setting Default Values: Instead of using setFieldValue() after form initialization, consider setting default values when initializing the form:

const formInstance = useForm({
  defaultValues: {
    title: "",
    subtitle: "",
    content: "",
  },
});

const formInstance = useForm({
  defaultValues: {
    title: "",
    subtitle: "",
    content: "",
  },
});

If you're working with MUI components, you might also need to handle the shrink state properly:

<TextField
  {...register("name")}
  InputLabelProps={{ shrink: !!watch("name") }}
  // other props
/>

<TextField
  {...register("name")}
  InputLabelProps={{ shrink: !!watch("name") }}
  // other props
/>

This approach has helped users resolve similar issues with form field rendering in refine applications. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@347285614531444756> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Warning: There may be circular references

Did you find this page helpful?