useState的特例，这是什么？

Question

我在用expo + supabase做反应-本土项目。

来自它的QuickStart文档，(https://supabase.com/docs/guides/with-expo#launch)

import 'react-native-url-polyfill/auto'
import { useState, useEffect } from 'react'
import { supabase } from './lib/supabase'
import Auth from './components/Auth'
import Account from './components/Account'
import { View } from 'react-native'
import { Session } from '@supabase/supabase-js'

export default function App() {
  const [session, setSession] = (useState < Session) | (null > null)  // <-- what is this?

  useEffect(() => {
    setSession(supabase.auth.session())

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])

  return (
    <View>
      {session && session.user ? (
        <Account key={session.user.id} session={session} />
      ) : (
        <Auth />
      )}
    </View>
  )
}

我不知道这个useState是如何工作的。

我知道|是位或运算符，但是useState是如何工作的呢？

Answer 1

当您将类型抄本代码粘贴到.js文件中，而编辑器试图格式化它并不幸失败时，就会发生这种情况。

我认为代码实际上是这样的。

const [session, setSession] = useState<Session|null>(null);  

额外的括号和空格是由您的编辑器添加的。例如，VSCode就是这样做的。

上面的语句意味着session是一个状态变量，可以是Session或null类型。然后用值null初始化它。

下面是一个链接，可以帮助您在useState中使用TS。

Answer 2

您在useState中有错误，请尝试下面的代码

const [session, setSession] = (useState <Session | null>(null);  // updated here <Session | null> 

是打字本中使用的接口，如果您不理解，请轻松使用删除接口。