我正在尝试创建一个登录页面,用户在其中按下按钮,并使用 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,
},
};
最佳答案
您应该在创建上下文时初始化 setUser 函数
const UserContext = createContext({
user: defaultUser,
setUser: (user: User) => {}
})
关于ReactJS 和 Typescript useContext - 类型上不存在属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70514587/