web-dev-qa-db-fra.com

Comment Formik SetfieldValue dans UseEffect Crochet

J'ai une forme de formik qui doit être modifiée de manière dynamique en fonction des informations passées via le routeur. Je dois exécuter une requête graphique pour extraire des données et peupler le formulaire avec les données récupérées. Je suis capable de configurer le formulaire et de récupérer les données, mais je ne peux pas comprendre comment setFieldValue pour le formulaire sous-jacent lors d'un crochet UseEffect. J'ai envie de me manquer une pièce importante pour avoir accès au contexte du Formik, mais je n'ai pas pu le comprendre des documents.

Toute aide est la bienvenue.

import React, { useState, useEffect } from "react";
import Router, { useRouter } from "next/router";

import Container from "react-bootstrap/Container";
import { Field, Form, FormikProps, Formik } from "formik";
import * as Yup from "yup";

import { useLazyQuery } from "@apollo/react-hooks";
import { GET_PLATFORM } from "../graphql/platforms";

export default function platformsForm(props) {
  const router = useRouter();

  // grab the action requested by caller and the item to be updated (if applicable)
  const [formAction, setFormAction] = useState(router.query.action);
  const [formUpdateId, setFormUpdateId] = useState(router.query.id);

  const [initialValues, setInitialValues] = useState({
    platformName: "",
    platformCategory: ""
  });

  const validSchema = Yup.object({
    platformName: Yup.string().required("Name is required"),
    platformCategory: Yup.string().required("Category is required")
  });

  const [
    getPlatformQuery,
    { loading, error, data: dataGet, refetch, called }
  ] = useLazyQuery(GET_PLATFORM, {
    variables: { id: formUpdateId }
  });

  useEffect(() => {
    !called && getPlatformQuery({ variables: { id: formUpdateId } });
    if (dataGet && dataGet.Platform.platformName) {
      console.log(
        dataGet.Platform.platformName,
        dataGet.Platform.platformCategory
      );

      //
      // vvv How do I set Field values at this point if I don't have Formik context
      // setFieldValue();
      //
    }
  }),
    [];

  const onSubmit = async (values, { setSubmitting, resetForm }) => {
    console.log("submitted");
    resetForm();
    setSubmitting(false);
  };

  return (
    <Container>
      <Formik
        initialValues={initialValues}
        validationSchema={validSchema}
        onSubmit={onSubmit}
      >
        {({
          handleSubmit,
          handleChange,
          handleBlur,
          handleReset,
          values,
          touched,
          isInvalid,
          isSubmitting,
          isValidating,
          submitCount,
          errors
        }) => (
          <Form>
            <label htmlFor="platformName">Name</label>
            <Field name="platformName" type="text" />

            <label htmlFor="platformCategory">Category</label>
            <Field name="platformCategory" type="text" />

            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </Container>
  );
}
reactjsreact-apolloformikuse-effect
3
Ben Riga

La bonne façon d'accéder à Formik State et d'assistants est d'utiliser le crochet de Formik's useFormikContext. Cela vous donne tout ce dont vous avez besoin.

Vérifiez les documents pour plus de détails et un exemple: https://formik.org/docs/api/useformikContextex

2
ahmadx87