ReactJS och Typescript useContext - egenskapen finns inte på typen

Jag försöker skapa en inloggningssida där en användare trycker på en knapp, och tillståndet uppdateras med hjälp av useContext. Jag har följt några tutorials online och letat efter en förklaring eller lösning men utan framgång. Problemet jag stöter på just nu är att kompilatorn säger i login_spotify.tsx att egenskapen setUser inte finns på typen 'User'. Vad skulle rekommenderas för att jag ska kunna uppdatera tillståndet med det nya i login_spotify.tsx.

Förhoppningsvis kommer mitt program att växa och bli mer komplext, så istället för att bara skicka ner propsen kommer useContext att behövas.

Min kod är som följer:

app.tsx

import React, { useState } from 'react';
import './App.css';

import { UserContext } from '../Context';
import { User} from '../Types';

import { defaultUser } from '../../constants/defaults';
import { SpotifyLoginButton } from '../Buttons';

function App() {
    const [ user, setUser ] = useState<User>(defaultUser);
    return (
        <div className="window">
            <h1>{user.name}</h1>
            < UserContext.Provider value={{user, setUser}}>
                <SpotifyLoginButton />
            </UserContext.Provider>
        </div>
    );
}

export default App;

user_context.tsx

import { createContext } from "react";

import { defaultUser } from "../../constants/defaults";

const UserContext = createContext(defaultUser);

export { UserContext }

login_spotify.tsx

import React, { useContext } from "react";
import Button from '@material-ui/core/Button';
import { UserContext } from "../Context";

function SpotifyLoginButton() {

    const {user, setUser} = useContext(UserContext);

    return (
        <Button variant={"outlined"} 
                color={'primary'} 
                onClick={() => { 
                    setUser({
                        email: "[email ",
                        image: "something",
                        name: "Jane Doe",
                        tokens: {
                            accessToken: "abc123",
                            refreshToken: "def234",
                        },
                    });
                }}>
            Login with Spotify
        </Button>
    );
}

export default SpotifyLoginButton

typer.tsx

export type User  ={
    email: string | null;
    image: string | null;
    name: string | null;
    tokens: {
        accessToken: string | null;
        refreshToken: string | null;
    };
}

defaults.tsx

import { User } from '../components/Types';

// default user
export const defaultUser: User = {
    email: null,
    image: null,
    name: null,
    tokens: {
        accessToken: null,
        refreshToken: null,
    },
};

Svar #1

du bör initiera setUser-funktionen när du skapar kontext

const UserContext = createContext({
    user: defaultUser,
    setUser: (user: User) => {}
})

Relaterade artiklar