ReactJS 和 Typescript useContext - 类型上不存在属性

Question

我正在尝试创建一个登录页面，用户在其中按下按钮，并使用 useContext 更新状态。我在网上学习了一些教程，并四处寻找解释或解决方案，但无济于事。我目前遇到的问题是编译器在 login_spotify.tsx 中说属性 setUser 在类型“用户”上不存在。在 login_spotify.tsx 中用新状态更新状态会给我什么建议。

希望我的程序会增长并变得更复杂，因此需要使用 useContext，而不是仅仅传递 props。

我的代码如下:

应用.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;

用户上下文.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: "janedoe@gmail.com",
                        image: "something",
                        name: "Jane Doe",
                        tokens: {
                            accessToken: "abc123",
                            refreshToken: "def234",
                        },
                    });
                }}>
            Login with Spotify
        </Button>
    );
}

export default SpotifyLoginButton

类型.tsx

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

默认.tsx

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

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

Answer 1

您应该在创建上下文时初始化 setUser 函数

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