来自 API 的数据未填充输入字段。福尔米克

Question

我使用 Formik 在功能组件 ReactJS 上创建了简单的表单。当组件安装时，我的表单的输入字段应该从 API 获取数据。为此，我正在使用 fetch 和 useEffect。获取后，检索 API 中的数据但不会填充，直到触发 formik.handleChange。

如果尝试在任何输入字段中指定某些内容，则会触发 formik.handleChange，并且所有字段都会立即填充来自 API 的数据（在我的例子中，只填充电子邮件）

如何在组件挂载时触发 formik.handleChange？

import React, { useEffect } from 'react';
import { TextField, Button } from '@material-ui/core/';
import { useFormik } from 'formik';
import * as yup from "yup";

const validationSchema = yup.object({

  Title: yup.string("Enter your Title").required("Title is required"),
  email: yup
    .string("Enter your email")
    .email("Enter a valid email")
    .required("Email is required"),
});

export default function Form() {

const formik = useFormik({
    initialValues: {
      Title: "",
      email: ""
    },
    validationSchema: validationSchema,
    onSubmit: async (values) => {
      //...code of post function
      //...code of post function
      //...code of post function
    }
  });

    useEffect(() => {
    (async () => {
      try {
        let response = await fetch(
          "https://run.mocky.io/v3/5be581aa-89d3-43e3-8478-7186633f8d16"
        );
        let content = await response.json();
        formik.initialValues.email = content[0].email;
      } catch (e) {
        console.log(e);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

    return (
        <form onSubmit={formik.handleSubmit}>
            <TextField
                fullWidth
                id="email"
                name="email"
                label="Email"
                value={formik.values.email}
                onChange={formik.handleChange}
                error={formik.touched.email && Boolean(formik.errors.email)}
                helperText={formik.touched.email && formik.errors.email}
            />
            <Button color="primary" variant="contained" fullWidth type="submit">
                Submit
            </Button>
        </form >

    );
}

Link to SandBox

此外，我还有第二种使用 ReactState 的方法，但我认为这种方法不太受欢迎，但它还有另一个错误：提取后，状态填充了我的输入字段，但验证失败。当我尝试提交数据时，要验证发送反应状态的默认值（那些在获取之前出现的值）

Link to SandBox with useState way

Answer 1

你走的路很好。将值重新分配给 formik 实例将无济于事。在获取数据后使用 setFieldValue 设置值（如果要设置所有值，则只需 setValues）：

formik.setFieldValue("email", content[0].email);

或：

formik.setValues(content[0]);

这是您的沙盒的修改版本： https://codesandbox.io/s/jolly-sun-uppr6?file=/src/App.js

不要忘记设置您的 formik 以启用重新初始化 - https://formik.org/docs/api/formik#enablereinitialize-boolean

来自 API 的数据未填充输入字段。福尔米克

Data from API is not filled inputs fields. Formik

javascript

reactjs

formik

formik-material-ui