useEffect在app.js中设置状态时导致渲染错误

Question

我在我的app.js文件中有一个useEffect，它试图根据我得到的函数的响应设置一个'会话'状态。

const App = () => {
const [session, setSession] = useState(null)
useEffect(() => {
supabase.auth.getSession()
.then((response) => {
setSession(response.data.session)
})
supabase.auth.onAuthStateChange((_event, session) => {
setSession(session)
})
}, [session])

然后我把这个状态作为道具传递给我的'Router'组件，如下所示:

<Route path="/dashboard/details" element={<PrivateRoute><DashboardDetails session={session}/></PrivateRoute>} />

最后，在我的组件中，我尝试从会话数据中访问用户的id，并将其设置为'id'状态，传递props作为依赖项，以防用户的id在第一次渲染时不可用:

useEffect(() => {
const id = props.session.user.id
setId(id)
}, [props])

但是，它返回以下错误:

Uncaught TypeError: Cannot read properties of null (reading 'user')

我明确地知道session.user.id是访问它的正确路径，但是我不知道我在这里做错了什么。

Answer 1

需要检查用户是否未定义。使用?运算符

useEffect(() => {
const id = props.session?.user?.id
if(id) setId(id)
}, [props.session])