Wie schreibe ich eine Antwort von der API in das Formik-Formular?

Question

Wie schreibe ich die API-Antwort an Formik? Ich habe eine API, über die ich Daten erhalte, die genau zu meinem Formular passen. Wie schreibe ich die gesamte Antwort auf einmal, anstatt mehrere setFieldValue-Zeilen zu verwenden?

const form = useFormik({
        Anfangswerte: {
          Name: "",
          Anmeldung: "",
          um: {
            Alter: "",
            Rang: {
              Silber: wahr,
              Gold: falsch,-
              global: falsch
            }
          }
        }
      }); // Meine ursprüngliche Form

  const {
    Werte,
    handleChange,
    setFieldValue,
  } = bilden;

useEffect(() => {
    if (!isEmpty(projectData)) {
      Object?.keys(projectData)?.map((item: any, idx: number) => {
        const key: any = Object.keys(item).at(-1);
        setFieldValue(key, item[key]);
      });
    }
  }, [projectData]); // API-Antwort festlegen

Answer 1

你需要设置enableReinitialize来允许Formik在更改时更新值。

const form = useFormik({
    initialValues: ...,
    enableReinitialize: true //<-- 这里
});

你也可以在useEffect中一次性直接设置值。

useEffect(() => {
    if (projectData && .../*其他条件*/) {
        form.setValues(projectData)
    }
}, [projectData])

Answer 2

如果从API接收到的数据的结构与表单的结构相匹配，您可以使用setValues方法一次性设置整个状态。

确保来自API响应的数据结构（projectData）与您的initialValues的结构相匹配。

使用setValues方法一次性更新所有值。

const form = useFormik({
  initialValues: {
    name: "",
    login: "",
    about: {
      age: "",
      rank: {
        silver: true,
        gold: false,
        global: false
      }
    }
  }
});

const { setValues } = form;

useEffect(() => {
  if (projectData) {
    setValues(projectData);
  }
}, [projectData]); // 设置来自API的响应