为什么添加 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