报错：Property 'then' does not exist on type 'void'.

Question

我这里总是报这个错误，无法运行程序，麻烦老师帮忙看一下

// src/context/auth-context.tsx
import * as auth from 'auth-provider'
import React, { ReactNode, useState } from 'react'
import { User } from 'screens/project-list/search-panel'

interface AuthForm {
  username: string,
  password: string
}

const AuthContext = React.createContext< {
  user: User|null,
  register: (form: AuthForm) => Promise<void>,
  login: (form: AuthForm) => Promise<void>,
  logout: () => Promise<void>
} | undefined>(undefined)
AuthContext.displayName = 'AuthContext'

export const AuthProvider = ({children}: {children: ReactNode}) => {
  const [user, setUser] = useState<User | null>(null)

  const login = (form: AuthForm) => auth.login(form).then(setUser)
  const register = (form: AuthForm) => auth.register(form).then(setUser)
  const logout = () => auth.logout().then(() => setUser(null))

  return <AuthContext.Provider children={children} value={user, login, register, logout} />
}

export const useAuth = () => {
  const context = React.useContext(AuthContext)
  if(!context) {
    throw new Error('useAuth必须在AuthProvider中使用')
  }
  return context
}

// src/auth-provider.ts
import { User } from "screens/project-list/search-panel";

const apiUrl = process.env.REACT_APP_API_URL;
const localStorageKey = "__auth_provider_token__";

export const getToken = () => window.localStorage.getItem(localStorageKey);

export const handleUserResponse = ({ user }: { user: User }) => {
  window.localStorage.setItem(localStorageKey, user.token || "");
  return user;
};

export const login = (data: { username: string; password: string }) => {
  fetch(`${apiUrl}/login`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  }).then(async (response) => {
    if (response.ok) {
      return handleUserResponse(await response.json())
    } else {
      return Promise.reject(await response.json());
    }
  });
};

export const register = (data: { username: string; password: string }) => {
  fetch(`${apiUrl}/register`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(data),
  }).then(async (response) => {
    if (response.ok) {
      return handleUserResponse(await response.json())
    } else {
      return Promise.reject(await response.json());
    }
  });
};

export const logout = async() => window.localStorage.removeItem(localStorageKey);

Answer 1

EricFn 2021-07-02 14:29:46

src/auth-provider.ts 里 login 和 register 函数都要在 fetch 前加个 return

• 提问者 goodmornight #1

  感谢~

• 请看文档 #2

  感谢。。。。