Le type '{}' n'a pas d'attribut ''

Question

J'essaie de mettre en place un hook contextuel pour ma page de connexion. J'utilise du tapuscrit. J'ai démarré le hook contextuel mais j'ai des problèmes avec les déclarations de type. Lorsque j'essaie d'utiliser setUser, l'erreur suivante apparaît : La propriété 'setUser' n'existe pas sur le type '{}'.

C'est mon crochet contextuel jusqu'à présent.

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

Voici mon code de connexion.

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

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

, un objet vide, qui n'a pas de propriétés définies par l'utilisateur.

Je vais d'abord définir une nouvelle interface, mais vous pouvez la saisir si vous le souhaitez.

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

UserContextPour déclarer le type de vous pouvez :

1. Fournir des valeurs par défaut correspondant au type

export const UserContext = createContext("");

2. Définir la valeur de contexte par défaut sur objet vide/null

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

3. Conversion de type d'objets vides (mauvaise sécurité de type)

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

4. Affirmation non nulle (mauvaise sécurité de type)

export const UserContext = createContext(null!);

Notez que pour certains d’entre eux, vous devrez rédiger des chèques nuls plus tard. Voir ici

pour plus d'informations. 🎜