Jenis '{}' tidak mempunyai atribut ''

Question

Saya cuba menyediakan cangkuk konteks untuk halaman log masuk saya. Saya menggunakan skrip taip. Saya memulakan cangkuk konteks tetapi saya menghadapi masalah dengan pengisytiharan jenis. Apabila saya cuba menggunakan setUser ralat berikut muncul: Property 'setUser' tidak wujud pada jenis '{}'.

Ini adalah cangkuk konteks saya setakat ini.

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>
    )
}

Ini kod log masuk saya.

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

Anda memerlukan UserContext 变量指定类型。因为您在 createContext 中为其指定了 {} 参数，所以 Typescript 假定上下文的类型为 React.Context<{}>。因此，当您尝试使用上下文对象时，您会得到一个 {} untuk

, objek kosong, yang tidak mempunyai sifat yang ditentukan pengguna.

Mula-mula saya akan mentakrifkan antara muka baharu, tetapi anda boleh menaipnya jika anda mahu.

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

UserContextUntuk mengisytiharkan jenis anda boleh:

1. Sediakan nilai lalai yang sepadan dengan jenis

export const UserContext = createContext("");

2. Tetapkan nilai konteks lalai kepada objek kosong/null

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

3. Penukaran jenis objek kosong (keselamatan jenis lemah)

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

4. Penegasan bukan nol (keselamatan jenis buruk)

export const UserContext = createContext(null!);

Perhatikan bahawa untuk sesetengah daripada ini, anda perlu menulis semakan nol kemudian. Lihat di sini

untuk maklumat lanjut. 🎜