在 useEffect 中只調用一次 setState——有更好的方法嗎？

Question

在我的 React 應用程序中，我經常使用以下模式：

export default function Profile() {
    const [username, setUsername] = React.useState<string | null>(null);

    React.useEffect(()=>{
        fetch(`/api/userprofiles?username=myuser`)
        .then(res=>res.json())
        .then(data => setUsername(data.username))
        },[])
        
    return(
        <div>
            {username}'s profile
        </div>
    )
}

加載頁面時，會從服務器獲取一些用戶數據，然后頁面會使用該用戶數據進行更新。 我注意到的一件事是我真的只需要在加載時調用 setUsername() 一次，這使得使用 state 似乎有點過分。 我無法擺脫這樣一種感覺，即在 React 中必須有更好的方法來做到這一點，但在谷歌搜索時我真的找不到替代方法。 在不使用 state 的情況下，是否有更有效的方法來執行此操作？ 或者這是通常同意的加載數據的方式，當它只需要在頁面加載時完成一次

Answer 1

不使用任何外部庫，不 - 這就是這樣做的方式。

可以刪除Profile中的 state 並讓它從 prop 中呈現用戶名，但這需要將 state 添加到父組件中並在那里發出異步請求。 State 將需要在應用程序中與此數據相關的某處。

可以在自定義掛鈎后面抽象邏輯。 例如，一個圖書館有useFetch ，你可以在那里做

export default function Profile() {
    const { data, error } = useFetch('/api/userprofiles?username=myuser');
    // you can check for errors if desired...

    return(
        <div>
            {data.username}'s profile
        </div>
    )
}

現在 state 在useFetch中而不是在您的組件中，但它仍然存在。