為什么添加 useState 會導致我的 react 應用出現白屏？

Question

下面的代碼完全可以正常工作，並產生下圖。

import React from "react";
import "./App.css";
import { useState } from "react";

function App(){
    return(
        <body>
            <div className="nav_bar">
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
                <ul className="top">
                    <div className="circle circle1">
                        <li className="material-icons noselect">
                            drag_handle
                        </li>
                    </div>
                    <div className="circle circle2">
                        <li className="material-icons noselect">
                            home
                        </li>
                    </div>
                    <div className="circle circle3">
                        <li className="material-icons noselect">
                            person_outline
                        </li>
                    </div>
                </ul>
                <nav>
                    <ul className="bottom">
                        <li className="material-icons noselect" id="feed-bottom">
                            drag_handle
                        </li>
                        <li className="material-icons noselect" id="home-bottom">
                            home
                        </li>
                        <li className="material-icons noselect" id="profile-bottom">
                            person_outline
                        </li>
                    </ul>
                </nav>
            </div>
        </body>
    ); 
}

export default App;

結果

添加 useState 以獲取和設置當前的 state 會導致導航欄消失並顯示完全白屏。 具體來說，我正在使用 useState 將導航欄中顯示的圖標更改為文本，並將當前 state 設置為單擊的圖標。 下面的代碼

import React from "react";
import "./App.css";
import { useState } from "react";

function App(){
    const[selected, setselected] = useState('home');
    if(selected === 'feed'){
        const feed = document.getElementById('feed-bottom');
        feed.innerHTML = 'FEED';
    } else if (selected === 'profile') {
        const profile = document.getElementById('profile-bottom');
        profile.innerHTML = 'PROFILE';
    }else{
        const home = document.getElementById('home-bottom');
        home.innerHTML = 'HOME';
    }
    return(
        <body>
            <div className="nav_bar">
                <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>
                <ul className="top">
                    <div className="circle circle1">
                        <li className="material-icons noselect">
                            drag_handle
                        </li>
                    </div>
                    <div className="circle circle2">
                        <li className="material-icons noselect">
                            home
                        </li>
                    </div>
                    <div className="circle circle3">
                        <li className="material-icons noselect">
                            person_outline
                        </li>
                    </div>
                </ul>
                <nav>
                    <ul className="bottom">
                        <li className="material-icons noselect" id="feed-bottom" onClick={setselected('profile')}>
                            drag_handle
                        </li>
                        <li className="material-icons noselect" id="home-bottom" onClick={setselected('home')}>
                            home
                        </li>
                        <li className="material-icons noselect" id="profile-bottom" onClick={setselected('profile')}>
                            person_outline
                        </li>
                    </ul>
                </nav>
            </div>
        </body>
    ); 
}

export default App;

我查找了許多引用類似問題的帖子，但找不到與我有關的帖子。 我非常感謝一些幫助。

Answer 1

這條線

home.innerHTML = 'HOME';

會導致掛載錯誤，因為在掛載時，從 App 返回的 React 元素還沒有返回 - 容器仍然是空的； #feed-bottom元素尚不存在。

雖然您可以通過僅分配元素是否實際存在來修復它，但最好以 React 方式進行並有條件地將值放入 JSX 中。 不要在 React 中使用 vanilla DOM 方法，除非你必須這樣做。

Another problem is that your listeners - eg onClick={setselected('home')} - run when computed (immediately), because you're invoking the setselected function instead of passing a function as a prop to onClick .

您還可能打算在feed-bottom元素中傳遞feed （而不是profile ）。

要以 React 方式實現您的邏輯，您需要以下內容：

<li className="material-icons noselect" id="feed-bottom" onClick={() => setselected('feed')}>
    { selected === 'feed' ? 'FEED' : 'drag_handle' }
</li>
<li className="material-icons noselect" id="home-bottom" onClick={() => setselected('home')}>
    { selected === 'home' ? 'HOME' : 'home' }
    home
</li>
<li className="material-icons noselect" id="profile-bottom" onClick={() => setselected('profile')}>
    { selected === 'profile' ? 'PROFILE' : 'person_outline' }
    person_outline
</li>

並從頂部刪除所有if(selected === 'feed'){和類似代碼。

為什么添加 useState 會導致我的 react 應用出現白屏？

問題描述

1 個解決方案

解決方案1
2 已采納 2022-08-15 02:42:43

為什么添加 useState 會導致我的 react 應用出現白屏？

問題描述

1 個解決方案

解決方案1 2 已采納 2022-08-15 02:42:43

解決方案1
2 已采納 2022-08-15 02:42:43