React项目添加useState后页面白屏、导航栏消失求助

问题描述 #

原本可正常渲染导航栏的React代码，添加useState实现图标切换文本功能后，页面变为全白，导航栏消失。

原正常代码：

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;

修改后出问题的代码：

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;

错误原因分析 #

• DOM操作时机错误：组件渲染前就调用document.getElementById获取元素，此时DOM尚未生成，会抛出Cannot set property 'innerHTML' of null错误，导致组件崩溃。
• onClick事件触发错误：直接写onClick={setselected('profile')}会在组件渲染时立即执行状态更新，引发无限重渲染循环。
• 不当的HTML结构：React组件不应返回<body>标签，该标签属于根页面结构，应放在index.html中；<link>标签也应移入index.html的<head>内，避免重复渲染。

修复后的代码 #

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

function App(){
    const [selected, setSelected] = useState('home');

    // 根据状态返回对应内容，无需手动操作DOM
    const getNavItemContent = (item) => {
        return selected === item ? item.toUpperCase() : (
            <span className="material-icons noselect">
                {item === 'home' ? 'home' : item === 'profile' ? 'person_outline' : 'drag_handle'}
            </span>
        );
    };

    return(
        <div className="nav_bar">
            <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="noselect" 
                        onClick={() => setSelected('feed')}
                    >
                        {getNavItemContent('feed')}
                    </li>
                    <li 
                        className="noselect" 
                        onClick={() => setSelected('home')}
                    >
                        {getNavItemContent('home')}
                    </li>
                    <li 
                        className="noselect" 
                        onClick={() => setSelected('profile')}
                    >
                        {getNavItemContent('profile')}
                    </li>
                </ul>
            </nav>
        </div>
    ); 
}

export default App;

额外说明 #

• 将Material Icons的<link>标签移至项目根目录的index.html的<head>中，避免组件重复引入。
• 移除了选中项上的material-icons类，因为文本不需要图标字体样式，若需保留可根据状态动态添加。

内容的提问来源于stack exchange，提问作者TheReezen