Comment écrire la réponse de l'API sous forme Formik ?

Question

Comment écrire la réponse API à Formik ? J'ai une API via laquelle je reçois des données qui correspondent exactement à mon formulaire, comment puis-je écrire la réponse entière en même temps au lieu d'utiliser plusieurs lignes setFieldValue ?

const form = useFormik({
        Valeurs initiales: {
          nom: "",
          se connecter: "",
          à propos de: {
            âge: "",
            rang: {
              argent : vrai,
              or : faux,
              global : faux
            }
          }
        }
      }); // Mon formulaire initial

  const {
    valeurs,
    handleChange,
    définirFieldValue,
  } = formulaire ;

useEffect(() => {
    si (!isEmpty(projectData)) {
      Object?.keys(projectData)?.map((item : any, idx : number) => {
        clé const : any = Object.keys(item).at(-1);
        setFieldValue(clé, élément[clé]);
      });
    }
  }, [projectData]); // Définir la réponse de l'API

Answer 1

Vous devez définir enableReinitialize pour permettre à Formik de mettre à jour la valeur lorsqu'elle change.

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

Vous pouvez également définir la valeur directement dans useEffect en une seule fois.

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

Answer 2

Si la structure des données reçues de l'API correspond à la structure du formulaire, vous pouvez utiliser la méthode setValues pour définir l'état complet en une seule fois.

Assurez-vous que la structure des données de la réponse de l'API (la structure de projectData）与您的initialValues correspond.

Utilisez la méthode setValues pour mettre à jour toutes les valeurs en même temps.

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的响应