react-hook-form@7.56.4

1. z.coerce.number() 字符串轉數字 只在submit起效

使用useWatch監聽到的數據依然是字符串

2. form?.formState.isDirty 什麼時候為true？

form?.formState.isDirty 是跟defaultValues設置的值做對比，當值發生變化為true，否則為false。而不是輸入框的值發生變化isDirty就為true。

3. zod z.string()

• z.string() 為必填 但是你給默認值為 "" 空字符串則校驗會通過也就是説zod認為你已經輸入了值，換句話説z.string()驗證的是undefined
• z.string() 輸入框默認值為undefined，但是當我輸入了字符串然後將字符串全部刪掉，驗證居然通過了，submit函數拿到的數據為""這不符合預期，預期是必須有值而不是空字符串。這個時候可以使用z.string().min(1)，這樣就符合預期了。

4. useFieldArray append空數據或者數據為undefined會導致歷史數據出現在新item

  const defaultValues = useFormValues(initialParserValues, node);

  const form = useForm<z.infer<typeof FormSchema>>({
    defaultValues,
    resolver: zodResolver(FormSchema),
    shouldUnregister: true,
  });

  const name = 'parser';
  const { fields, remove, append } = useFieldArray({
    name,
    control: form.control,
  });

  const add = useCallback(() => {
    append({
      fileFormat: undefined,
    });
  }, [append]);

  useWatchFormChange(node?.id, form);

  return (
    <Form {...form}>
      <form className="px-5">
        {fields.map((field, index) => {
          console.info(field.id);
          return (
            <ParserItem
              key={field.id}
              name={name}
              index={index}
              fieldLength={fields.length}
              remove={remove}
            ></ParserItem>
          );
        })}
        <BlockButton onClick={add} type="button" className="mt-2.5">
          {t('dataflow.addParser')}
        </BlockButton>
      </form>
      <div className="p-5">
        <Output list={outputList}></Output>
      </div>
    </Form>
  );

按理説我刪除的時候對應的數據就應該被刪除，但是為啥新的表單還是會出現老的數據？ParserItem key也是唯一的。
無奈之前只好這麼做

  const add = useCallback(() => {
    append({
      fileFormat: null,
      output_format: '',
      parse_method: '',
      llm_id: '',
      lang: '',
      fields: [],
    });
  }, [append]);

但是我的表單是關聯的，這樣做會導致提交到後端的數據冗餘。

5. shouldUnregister: true 對display:none 無效

shouldUnregister: true 只對不在react樹裏的表單有效，比如

      {false && (
        <div className="hidden">
          <OutputFormatFormField
            prefix={prefix}
            fileType={fileFormat as FileType}
          />
        </div>
      )}

也就是説設置了shouldUnregister: true，則在某個表單從react組件樹消失的時候，該字段的值就會從整個表單中刪除，即使設置了初始值。

6. shouldUnregister: false模式下的表單表現

• 即使不在schema中定義該字段（比如outputs）且也沒有該字段對應的component，使用form.setValue('outputs', v);也可以將outputs值寫入到該表單中存起來。但是在@hookform/devtools看不到outputs字段。即使有數據了devtools也看不到。
• useFieldArray即使在shouldUnregister: false模式下，刪除remove一條數據該條數據也會從表單的array中被刪除。