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

Question

我正在尝试创建一个用户按下按钮的登录页面，并使用 useContext 更新 state。 我在网上遵循了一些教程，并进行了几轮寻找解释或解决方案，但无济于事。 我目前遇到的问题是编译器在 login_spotify.tsx 中说“用户”类型上不存在属性 setUser。 建议我用 login_spotify.tsx 中的新版本更新 state。

希望我的程序会增长并变得更复杂，因此不仅需要传递道具，还需要 useContext。

我的代码如下：

应用程序.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: "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 function

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