我是react/next js和formik & Yup的新手。我想调用一些数据库的输入字段模糊的API，这将带来一些数据，检查数据库级别的验证，并为下一个输入字段带来相应的数据。但它不起作用。在改变输入字段的onblur事件时，不调用验证功能。它只是调用handleAcNameExists（）函数。我使用了handleBlur（'accName'）;调用以进行验证，但不起作用。
这是我代码。

import CustomerDTO from "@/types/CustomerDTO";
import CustomerService from "@/service/CustomerService";
import { useState } from "react";
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

import { useFormik } from "formik";
import { CustomerSchema } from "@/schemas";

type AnotherComponentProps = {
    onToggle: () => void;
  };

const Edit = ({onToggle}:AnotherComponentProps) => {
    const [customerData, setCustomerData] = useState<CustomerDTO>({
        accId:0,
        accName: '',
        address: '',
        gstNo: '',
        mobNo: '',
        oppBal: '',
        balType: '',
        eId: '',
        panNo: '',
        creditLimit: ''
      });
    
      const { values, errors, touched, handleBlur, handleChange, handleSubmit } =
    useFormik({
      initialValues : customerData,
      validationSchema: CustomerSchema,
      onSubmit: async (values, action) => {
        console.log(
            "values ",
            values
          );
          console.log(
            " customerData ",
            customerData
          );
       
        const status = await CustomerService.saveCustomer(values)
        console.log('status '+status);
           if(status === true)
           {
            toast.success('Customer Saved.!');
           }
        action.resetForm();
      },
    });

    const handleAcNameExists = () => {
     // Api call and other logic
     console.log('in handleAcNameExists');
        handleBlur('accName');   
    
      };
      
  return (
    <div>
    <h3>Edit Customers </h3>
    <form onSubmit={handleSubmit}>
      <div className="row">
        <div className="col-sm-4 mb-3">
          <label htmlFor="accName" className="form-label">Customer Name:</label>
          <input
            type="text"
            id="accName"
            name="accName"
            className="form-control"
            value={values.accName}
            onChange={handleChange}
            onBlur={handleAcNameExists}
            autoFocus
          />
           {touched.accName && errors.accName && (
            <div className="error">{errors.accName}</div>
            )}
        </div>
        <div className="col-sm-4 mb-3">
          <label htmlFor="address" className="form-label">Customer Address:</label>
          <input
            type="text"
            id="address"
            name="address"
            value={values.address}
            onChange={handleChange}
            onBlur={handleBlur}
            className="form-control"
          />
          {touched.address && errors.address && (
            <div className="error">{errors.address}</div>
            )}
        </div>
        <div className="col-sm-4 mb-3">
          <label htmlFor="gstNo" className="form-label">GST No:</label>
          <input
            type="text"
            id="gstNo"
            name="gstNo"
            value={values.gstNo}
            onChange={handleChange}
            onBlur={handleBlur}
            className="form-control"
          />
        </div>
      </div>
      <div className="row">
        <div className="col-sm-4 mb-3">
          <label htmlFor="mobNo" className="form-label">Mobile Number:</label>
          <input
            type="text"
            id="mobNo"
            name="mobNo"
            value={values.mobNo}
            onChange={handleChange}
            onBlur={handleBlur}
            className="form-control"
          />
        </div>
        <div className="col-sm-4 mb-3">
          <label htmlFor="oppBal" className="form-label">Opening Balance:</label>
          <input
            type="text"
            id="oppBal"
            name="oppBal"
            value={values.oppBal}
            onChange={handleChange}
            onBlur={handleBlur}
            className="form-control"
          />
        </div>
        <div className="col-sm-4 mb-3">
          <label htmlFor="balType" className="form-label">Balance Type:</label>
          <select
            id="balType"
            name="balType"
            value={values.balType}
            onChange={handleChange}
            onBlur={handleBlur}
            className="form-select"
          >
            <option value="Dr">Debit</option>
            <option value="Cr">Credit</option>
          </select>
        </div>
      </div>
      <div className="row">
        <div className="col-sm-4 mb-3">
          <label htmlFor="creditLimit" className="form-label">Credit Limit:</label>
          <input
            type="text"
            id="creditLimit"
            name="creditLimit"
            value={values.creditLimit}
            onChange={handleChange}
            onBlur={handleBlur}
            className="form-control"
          />
        </div>
      </div>
      <div className="row">
        <div className="col-sm-6">
          <button type="submit" className="btn btn-primary">Save</button>
          
        </div>
        <div className="col-sm-6">
        <button className="btn btn-primary" onClick={onToggle} >
          Show
        </button>
        </div>
      </div>
    </form>
    </div>
  )
}

export default Edit

字符串
）}
导出默认值编辑