我是否無法在功能性 React 組件中使用帶有 useEffect 的內聯“if”？

Question

我目前正在嘗試使用 Okta 的 React SDK 來使用 TypeScript 使用 React 構建應用程序，並且我選擇使用功能組件而不是基於類的組件。

因此，我在根據用戶的身份驗證狀態呈現我的應用程序菜單的一部分時遇到了問題。 該文檔顯示使用useEffect()獲取用戶的身份驗證狀態，然后使用useState()根據該狀態存儲用戶信息。

這在實踐中似乎很合乎邏輯，也是一個好主意，但是當我嘗試使用以下組件時：

import React, { useState, useEffect } from 'react';
import { Dropdown } from 'semantic-ui-react';
import { useOktaAuth } from '@okta/okta-react';

export const HeaderUserMenu = () => {

    // Okta Hook, State
    const { authState, oktaAuth } = useOktaAuth();
    const [ userInfo, setUserInfo ] = useState(null);

    // Get info when our state/etc update with this.
    useEffect(() => {
        if (!authState.isAuthenticated) {
            setUserInfo(null);
        } else {
            oktaAuth.token.getUserInfo()
                .then((info: any) => setUserInfo(info))
        }
    }, [authState, oktaAuth])

    return (
        { userInfo && 
            <Dropdown.Menu item text={userInfo.username}>
                <Dropdown.Item>Log Info</Dropdown.Item>
            </Dropdown.Menu>
        }
    )    

}

我收到兩個錯誤：

',' expected. - 這是指使用&&運算符來檢查userInfo （是否為 null？）以對該組件進行條件渲染。

Object is possibly 'null'. - 這指向在有條件渲染的東西中使用userInfo.username 。 邏輯的全部要點是僅在userInfo不為空時才呈現，所以此時 userInfo不能為空，對嗎？

我不確定我在這里做錯了什么。

我覺得它與useEffect有useEffect ，但我想我可能是錯的，我仍然有點習慣在 React 中使用鈎子，盡管我之前使用過useState ，但我從未使用過效果到現在。

提前致謝！

Answer 1

'，' 預期的。 - 這是指使用 && 運算符來檢查 userInfo（是否為 null？）以對該組件進行條件渲染。

圖案：

 { userInfo &&

{在您的代碼中的位置表示“對象文字的開始”而不是“將值插入 JSX”，因為您尚未使用<初始化 JSX。

不要將該表達式包裝在{}

---

對象可能為“空”。 - 這指向在有條件渲染的東西中使用 userInfo.username 。 邏輯的全部要點是僅在 userInfo 不為空時才呈現，所以此時 userInfo 不能為空，對嗎？

您正在測試userInfo.username是否具有真值。

錯誤是因為userInfo本身可能是null 。

嘗試訪問(null).username將引發異常。

在測試userInfo是否具有username屬性之前先測試它是否具有值。

Answer 2

我能夠通過為 userInfo 聲明一個接口來解決這個問題，該接口將存儲在組件狀態中。

我還必須在!authState開始時檢查!authState authState。

這樣做之后，我用一個空對象替換了null ，現在我只是通過Object.keys(userInfo).length)檢查對象是否為空。

它似乎工作正常，並且沒有報告錯誤。