Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The form.setFields is causing the warning: "Warning: There may be circular references" #649

Open
jackblackevo opened this issue Feb 23, 2024 · 1 comment · May be fixed by #650
Open

The form.setFields is causing the warning: "Warning: There may be circular references" #649

jackblackevo opened this issue Feb 23, 2024 · 1 comment · May be fixed by #650

Comments

@jackblackevo
Copy link

form.setFields 會導致警告「Warning: There may be circular references」

How to reproduce 如何重現

  1. Visit https://codesandbox.io/p/devbox/rc-field-form-circular-references-8z9hfk?file=%2Fsrc%2FApp.tsx
  2. Open the "CodeSandbox Preview Console" or the "Browser DevTools Console". 打開 CodeSandbox 或是瀏覽器的開發人員工具
  3. Click the "Set Form Fields" button on the webpage. 點擊網頁中的「Set Form Fields」按鈕
  4. Check the warning log in the console. 於 Console(控制台)中查看警告 log(日誌訊息)

image

Possible causes 可能造成的原因

Both errors and warnings point to EMPTY_ERRORS, causing isEqual to perform a deepEqual comparison, determining that warnings and the errors already existing in refSet have the same reference.

errorswarnings 皆指向 EMPTY_ERRORS,造成 isEqual 進行 deepEqual 時,判斷 warnings 與已存在於 refSeterrors 有相同的 reference(参考)。

field-form/src/Field.tsx

Lines 148 to 149 in 294125e

private errors: string[] = EMPTY_ERRORS;
private warnings: string[] = EMPTY_ERRORS;

field-form/src/Field.tsx

Lines 517 to 518 in 294125e

errors: this.errors,
warnings: this.warnings,

field-form/src/Field.tsx

Lines 240 to 242 in 294125e

if (!isEqual(this.metaCache, meta)) {
onMetaChange(meta);
}

Related Pull Request 相關的 PR

#604

@jackblackevo
Copy link
Author

import Form, { Field } from "rc-field-form";

const Input = ({ value = "", ...props }) => <input {...props} value={value} />;

function App() {
  const [form] = Form.useForm<{ username: string }>();

  const setFormFields = () => {
    // Warning: Warning: There may be circular references
    // https://github.com/react-component/util/blob/871c2c146b1050e33091005b32b8debcdcd15ca7/src/isEqual.ts#L14
    form.setFields([{ name: "username", errors: [] }]);
  };

  return (
    <Form form={form}>
      <Field
        name="username"
        rules={[{ required: true }]}
        onMetaChange={() => {}}
      >
        <Input />
      </Field>

      <button onClick={setFormFields}>Set Form Fields</button>
    </Form>
  );
}

export default App;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant