Auth上下文在类型方面存在一些问题。
我的代码不起作用，尽管它是使用本教程(链接到使用AuthContext的精确文件)生成的。这个片段特别是Auth上下文的一部分。唯一的区别是我用打字本而不是JS编码。告诉我你还需要什么帮助我解决我的问题。
useEffect(() => {
const user = supabase.auth.getUser().user;
setCurrentUser(user)
const auth = supabase.auth.onAuthStateChange((event, session) => {
if (event === 'SIGNED_IN') {
setCurrentUser(session.user)
}
if (event === 'SIGNED_OUT') {
setCurrentUser(null)
}
})
return () => auth.data.unsubscribe()
}, [])错误：
ERROR in src/contexts/AuthContext.tsx:76:46
TS2339: Property 'user' does not exist on type 'Promise<UserResponse>'.
74 |
75 | useEffect(() => {
> 76 | const user = supabase.auth.getUser().user;
| ^^^^
77 | setCurrentUser(user)
78 |
79 | const auth = supabase.auth.onAuthStateChange((event, session) => {
ERROR in src/contexts/AuthContext.tsx:81:32
TS2531: Object is possibly 'null'.
79 | const auth = supabase.auth.onAuthStateChange((event, session) => {
80 | if (event === 'SIGNED_IN') {
> 81 | setCurrentUser(session.user)
| ^^^^^^^
82 | }
83 |
84 | if (event === 'SIGNED_OUT') {
ERROR in src/contexts/AuthContext.tsx:81:32
TS2345: Argument of type 'User' is not assignable to parameter of type 'SetStateAction<undefined>'.
Type 'User' provides no match for the signature '(prevState: undefined): undefined'.
79 | const auth = supabase.auth.onAuthStateChange((event, session) => {
80 | if (event === 'SIGNED_IN') {
> 81 | setCurrentUser(session.user)
| ^^^^^^^^^^^^
82 | }
83 |
84 | if (event === 'SIGNED_OUT') {
ERROR in src/contexts/AuthContext.tsx:85:32
TS2345: Argument of type 'null' is not assignable to parameter of type 'SetStateAction<undefined>'.
83 |
84 | if (event === 'SIGNED_OUT') {
> 85 | setCurrentUser(null)
| ^^^^
86 | }
87 | })
88 |
ERROR in src/contexts/AuthContext.tsx:89:32
TS2339: Property 'unsubscribe' does not exist on type '{ subscription: Subscription; }'.
87 | })
88 |
> 89 | return () => auth.data.unsubscribe()
| ^^^^^^^^^^^
90 |
91 | }, [])
92 |预先感谢您的帮助
回答 1
Stack Overflow用户
发布于 2022-09-29 02:28:58
Supabase v@2.0.0+
可用的auth函数及其返回类型略有变化。它们不再提供supabase.auth.user()函数，而只提供可预测的supabase.auth.getUser()。返回类型的getUser是
export type UserResponse =
| {
data: {
user: User
}
error: null
}
| {
data: {
user: null
}
error: AuthError
}我相信对象解构也更易读，所以
const { data: { user } = await supabase.auth.getUser()会更好。
这还解决了onAuthStateChange()的返回问题，返回类型为
{
data: { subscription: Subscription }
}所以您的代码将更改为
const { data: { subscription }} = supabase.auth.onAuthStateChange(callback);Supabase v@1.0.0+ Supbase提供了两个检索用户的函数.user().和.getUser()。.user()从localStorage中获取用户，这意味着它是一个不承诺的函数。.getUser()使用jwt从服务器上获取用户，因此这是一个承诺。在本教程中，他们使用.user()函数，这就是为什么没有等待。在代码中使用.getUser()函数。要继续在.getUser()中使用useEffect函数，您必须在异步函数中调用它。
useEffect(() => {
const fetchUser = async() => {
const { user } = await supabase.auth.getUser();
setCurrentUser(user);
}
fetchUser();
},[])useState types要解决useState错误，当状态类型为传递给它的defaultValue的不同类型时，必须将一个类型传递给useState()函数。const [str, setStr] = useState('');将变量推断为字符串，而const [idk, setIdk] = useState(null)只推断变量为未定义的变量，这就是当您试图将currentUser设置为用户或null类型变量时抛出错误的原因。
解决这个问题的方法是将用户类型传递给useState。
import { User } from '@supabase/supabase-js';
const [currentUser, setCurrentUser] = useState<User | null>(null);Nullish检查以解决'Object可能为null‘的错误，您所要做的就是添加一个空检查，或者以if/else语句的形式进行。
if(user) or if(user !== null) {
setCurrentUser(user)
}或者添加一个空变量检查，
const user = session?.user;用户和== null之间有细微的区别，后者的包容性较低。看这里
如果您不需要为supabase创建自己的auth系统，我建议使用支援员。
https://stackoverflow.com/questions/73887935
复制相似问题
腾讯云开发者
