当我在电子邮件或密码框中输入一个值时，它会显示一个空白屏幕。基本上在使用Formik时
我应用了onchange函数，但是当我试图改变初始值时，它显示了一个错误。我试图弄清楚它。
登录页面：-

import React from "react";
import { Link } from "react-router-dom";
import { Formik, Form } from "formik";
import Input from "./Input";
import * as Yup from "yup";

export default function Login() {

  const schema = Yup.object().shape({
    email: Yup.string().email().required(),
    password: Yup.string().min(8).required()
  });

  function Callloginapi(values) {
    console.log("Sending at", values);
  }

  const initialvalues = {
    email:"",
    password:""
  };

  return (
    <div>
      <Formik
        initialvalue={initialvalues}
        validationSchema={schema}
        onSubmit={Callloginapi}
        validateOnMount
      >
        <Form className="bg-black brightness-50 p-1 px-4">
          <div className="flex justify-center h-4/6 max-w-xl bg-indigo-400 brightness-100  my-28 m-auto p-4">
            <div className="flex flex-col">
              <h3 className="text-center text-black font-semibold text-2xl bold pt-2 m-2">
                Login
              </h3>
              <div className="flex flex-col my-3 ">
                <label className=" text-black font-semibold  ">Email</label>
                <Input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="Email"
                  required
                />
              </div>
              <div className="flex flex-col my-3 ">
                <label className=" text-black  font-semibold">Password</label>
                <Input
                  type="password"
                  id="password"
                  name="password"
                  placeholder="Password"
                  required
                />
              </div>
              <div className="flex  my-3 ">
                <input type="checkbox" />
                <p className="text-black  font-semibold px-2">Remember me</p>
              </div>
              <button className="border-white font-semibold border-2 text-black rounded-md hover:bg-white      hover:font-bold hover:text-xl mx-10 my-2">
                Login
              </button>
              <div className="flex gap-4 mt-2 space-x-3">
                <Link
                  className="bg-white font-semibold text-black border-1 rounded-sm p-1 hover:bg-white hover:font-bold hover:text-xl  flex items-center"
                  to="/"
                >
                  New User?
                </Link>
                <Link
                  className="bg-white font-semibold text-black border-1 rounded-sm p-1 hover:bg-white hover:font-bold hover:text-xl flex items-center "
                  to="/"
                >
                  {" "}
                  Google
                </Link>
              </div>
            </div>
          </div>
        </Form>
      </Formik>
    </div>
  );
}

输入页面：-

import { useField } from 'formik'
import React from 'react'

export default function Input({label,id,name,placeholder,required,...rest}) {

   const field= useField(name);
   const [data,meta]=field;
   const {value,onBlur,onChange}=data;
   const {touched,error}=meta;

  return (
    <div>
        <label htmlFor={id}>{label}</label>
        <input
        id={id}
        name={name}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
        required={required}
        placeholder={placeholder}
        />
    {touched && error && <div className="text-red-700">{error}</div>}
    </div>
  )
 }

错误显示：-未捕获的TypeError：无法读取未定义的属性（阅读“email”）
上述错误发生在Formik组件中：