React Formik 默认值

React Formik是一个流行的React表单库，它提供了一种简单且优雅的方式来处理表单的验证和数据处理。在许多情况下，我们需要在表单中设置默认值，以便用户在打开表单时可以看到预先填充的数据。本文将介绍如何在React Formik中设置默认值，并通过一个案例代码来演示。

jsx
import React from "react";
import { Formik, Form, Field } from "formik";
const App = () => {
  const initialValues = {
    name: "John Doe",
    email: "johndoe@example.com",
    age: 25
  };
  const handleSubmit = (values) => {
    console.log(values);
  };
  return (
    
      
        
          Name:
          
        
        
          Email:
          
        
        
          Age:
          
        
        Submit
      
    
  );
};
export default App;

jsx
import React, { useState, useEffect } from "react";
import { Formik, Form, Field } from "formik";
import axios from "axios";
const App = () => {
  const [initialValues, setInitialValues] = useState({
    name: "",
    email: "",
    age: 0
  });
  useEffect(() => {
    fetchUserData();
  }, []);
  const fetchUserData = async () => {
    try {
      const response = await axios.get("/api/user");
      const userData = response.data;
      setInitialValues(userData);
    } catch (error) {
      console.error(error);
    }
  };
  const handleSubmit = (values) => {
    console.log(values);
  };
  return (
    
      
        
          Name:
          
        
        
          Email:
          
        
        
          Age:
          
        
        Submit
      
    
  );
};
export default App;