類型'{}”沒有屬性'”

Question

我正在嘗試設定一個用於我的登入頁面的上下文掛鉤。我正在使用打字稿。我啟動了上下文掛鉤，但遇到了類型聲明的問題。當我嘗試使用 setUser 時，會彈出以下錯誤：類型“{}”上不存在屬性“setUser”。

這是到目前為止我的上下文掛鉤。

import { createContext, ReactNode, useEffect, useState } from "react"

interface Props {
    children?: ReactNode
}


export const UserContext = createContext({})

export function UserContextProvider({children}: Props) {
    const [user, setUser] = useState(null)
    return (
        <UserContext.Provider value={{user, setUser}}>
            {children}
        </UserContext.Provider>
    )
}

這是我的登入程式碼。

import { Link, Navigate } from "react-router-dom"
import axios from 'axios'
import { UserContext } from "../UserContext"


const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [redirect, setRedirect] = useState(false)
  **const {setUser} = useContext(UserContext)**

  async function handleLogin(e: any) {
    e.preventDefault()
    try {
      const userInfo = await axios.post('/auth/login', {email, password})
      setUser(userInfo)
      alert('Login')
      setRedirect(true)
    } catch (e) {
      alert('Login failed')
    }
  }

  if(redirect){
    return <Navigate to={'/'} />
  }

  return (
    <div>
      <div>
        <h1>Login</h1>
        <form onSubmit={handleLogin}>
          <input type="email" placeholder="your@email.com" 
          value={email} onChange={e => setEmail(e.target.value)}/>
          <input type="password" placeholder="password" 
          value={password} onChange={e => setPassword(e.target.value)}/>
          <button>Login</button>
          <div>
            Don't have an account?
            <Link to={"/auth/register"}> Sign Up</Link>
          </div>
        </form>
      </div>
    </div>
  )
}

export default Login

Answer 1

您需要為 UserContext 變數指定類型。因為您在 createContext 中為其指定了 {} 參數，所以 Typescript 假定上下文的類型為 React.Context<{}>。因此，當您嘗試使用上下文物件時，您會得到一個 {}，一個空對象，它沒有使用者定義的屬性。

首先，我將定義一個新介面，但您可以根據需要鍵入它。

interface IUserContext {
  user: any;
  setUser: any; //set your definitions here (please don't use `any`)
}

要宣告UserContext的類型，您可以：

1. 提供與類型相符的預設值

   export const UserContext = createContext("");
   

2. 將預設上下文值設定為空物件/null

   export const UserContext = createContext({});
   export const UserContext = createContext(null);
   

3. 對空物件進行型別轉換（型別安全性較差）

   export const UserContext = createContext({} as IUserContext);
   

4. 非空斷言（型別安全性較差）

   export const UserContext = createContext(null!);
   

請注意，對於其中一些，您需要稍後編寫空檢查。請參閱此處以了解更多資訊。