Javascript 我试图在我的demo react redux应用程序中实现Api，当我两次单击事件Api调用时

您好，我正在尝试在我的react redux演示应用程序中实现假API，当我触发事件时，我收到了两次响应我不知道我哪里做错了这里我正在共享我的代码请查看

User.tsx

import React, { useState } from 'react';

import { useDispatch, useSelector } from "react-redux";
import { RootState } from "./Store";
import { GetUser } from './actions/UserActions';

function User() {
    const dispatch = useDispatch();
    const [userName, setUserName] = useState("");
    const userState = useSelector((state: RootState) => state.user);
    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setUserName(event.target.value);
    const handleSubmit = () => dispatch(GetUser(userName));

    return (
        <div >
            <input type="text" onChange={handleChange} />
            <button onClick={handleSubmit}>Search</button>
        </div>
    );
}

export default User;

使用动作类型

export const USER_LOADING = 'USER_LOADING'
export const USER_FAIL = 'USER_FAIL'
export const USER_SUCCESS = 'USER_SUCCESS'

export type UserType = { userData: UserAbility[] }


export type UserAbility = {
    user: {
        name: string

        mobile_No: number
    }
}
export interface UserLoading {
    type: typeof USER_LOADING
}

export interface UserFail {
    type: typeof USER_FAIL
}

export interface UserSuccess {
    type: typeof USER_SUCCESS,
    payload: UserType
}

export type UserDispatchTypes = UserLoading | UserFail | UserSuccess

---

代码工作正常，但当我看到浏览器控制台api调用两次时

控制台日志中有多少“res1响应”。有时使用CORS策略，浏览器将调用第一个api（选项）以获得权限。如果成功，它将调用真正的api。它们是相同的urlHI San。我在控制台中得到一个res1响应。现在，请告诉我如何解决此问题？请检查两个请求。如果两个请求具有相同的url，并且第一个方法api为OPTION，第二个方法api为GET，则这是预引导请求。参考：嗨，也许这篇文章可以帮助你：顺便说一句，我建议你尝试redux promise中间件，如redux thunk或saga，以便能够“自动”管理挂起/成功/失败请求状态和所有异步调用：）

import {
  UserDispatchTypes,
  UserType,
  USER_FAIL,
  USER_LOADING,
  USER_SUCCESS,
} from "../actions/UserActionTypes"


interface DefaultStateI {
  loading: boolean
  user?: UserType
}

const defaultState: DefaultStateI = {
  loading: false,
}

const userReducer = (
  state = defaultState,
  action: UserDispatchTypes
): DefaultStateI => {
  switch (action.type) {
    case USER_FAIL:
      return {
        ...state,
        loading: false,
      }
    case USER_LOADING:
      return {
        ...state,
        loading: true,
      }
    case USER_SUCCESS:
      return {
        ...state,
        loading: false,
        user:res1.data
      }
    default:
      return state
  }
}

export default userReducer

export const USER_LOADING = 'USER_LOADING'
export const USER_FAIL = 'USER_FAIL'
export const USER_SUCCESS = 'USER_SUCCESS'

export type UserType = { userData: UserAbility[] }


export type UserAbility = {
    user: {
        name: string

        mobile_No: number
    }
}
export interface UserLoading {
    type: typeof USER_LOADING
}

export interface UserFail {
    type: typeof USER_FAIL
}

export interface UserSuccess {
    type: typeof USER_SUCCESS,
    payload: UserType
}

export type UserDispatchTypes = UserLoading | UserFail | UserSuccess