如何在 React 中正確顯示一個基於 State 的組件

Question

我有一個異步 function，它通過調用 Mongo 來確定用戶是否已投票。 如果他們投票了，我想顯示一個組件（結果組件），如果他們沒有投票，我想顯示另一個組件（問題組件）。 但是，無論我做什么，如果他們已經投票，它總是在更改為結果組件之前顯示問題組件的 flash。 這讓我發瘋，我花了幾個小時嘗試每一種可能的排列。

我的 function 確定他們是否投票是：

const [hasVoted, setHasVoted] = useState(false)
const [gotUserData, setGotUserData] = useState(false)

useEffect(() => {
    async function findHasVoted() {
        let response = await axios.get(`/api/polls/get-user-vote?userId=${userId}&postId=${postId}`)
        if (response.data.userId===userId) {
            setHasVoted(true)  
        }
        setGotUserData(true)
    }
    findHasVoted()
},[userId, postId])

為了簡單起見，JSX 如下所示。 如果我們有用戶數據（gotUserData===true）並且他們已經投票（hasVoted===true）顯示結果，否則如果我們有用戶數據並且他們沒有投票，則顯示問題：

{gotUserData===true && hasVoted===true ? <span>RESULTS</span>:null}
{gotUserData===true && hasVoted===false ? <span>QUESTIONS</span>:null}

如果用戶已投票，我如何對其進行編碼，以便我不會獲得問題組件的 flash？

我不能只執行以下操作，因為默認情況下“hasVoted”設置為 false。

{hasVoted===true ? <span>RESULTS</span>:null}
{hasVoted===false ? <span>QUESTIONS</span>:null}

為了解決任何虛假問題，我嘗試不對 hasVoted 使用 boolean 值：

const [hasVoted, setHasVoted] = useState('xx')

然后在 findHasVoted() function 中：

if (response.data.userId===userId) {
    setHasVoted('yes')  
} else {
    setHasVoted('no')
)
setGotUserData(true)

在 JSX 中

{gotUserData===true && hasVoted==='yes' ? <span>RESULTS</span>:null}
{gotUserData===true && hasVoted==='no' ? <span>QUESTIONS</span>:null}

但是當用戶投票時它仍然會在顯示結果之前閃爍問題，我無法理解，因為我現在明確指定“是”或“否”並且默認值為“xx”。 我確定這是一個相當簡單的問題，但我找不到答案。

非常非常感謝任何幫助。

Answer 1

考慮減少useStates的數量。 這樣你就可以更好地跟蹤你的數據並調試你的問題。 在您的 useEffect 中，您可以設置從 axios 方法接收的數據並使用它來呈現您的組件。

現在您所要做的就是檢查userHasVoted的值。 在第一次呈現時，該值是undefined 。 在 axios 方法之后，它要么是true要么是false 。

const [userHasVoted, setUserHasVoted] = useState(undefined);


useEffect(() => {
    async function findHasVoted() {
        let response = await axios.get(`/api/polls/get-user-vote?userId=${userId}&postId=${postId}`)
        // check if user has voted  
        const hasVoted = response.data?.userId === userId ? true : false;
        setUserHasVoted(hasVoted);
    }
    findHasVoted();
},[userId, postId])

console.log(userHasVoted); // either undefined, true or false

return (
    <>
        {userHasVoted === true && <p>Answer: {yourAnswer}</p>}
        {userHasVoted === false && <p>Question: {yourQuestion}</p>} 
        // For illustration purposes:
        {userHasVoted === undefined && <p>Loading...</p>}
    </>
)