为什么添加useState会在我的react应用程序中出现一个白屏幕？
下面的代码可以很好地工作，并得到下面的图像。
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以获取和设置当前状态将导致导航条消失，并显示一个完全白色的屏幕。具体来说，我使用useState将导航栏中显示的图标更改为文本，并将currernt状态设置为单击的图标。代码如下
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;我查过很多关于类似问题的帖子，但都找不到与我相关的帖子。我会感激你的帮助。
回答 1
Stack Overflow用户
发布于 2022-08-15 02:42:43
这条线
home.innerHTML = 'HOME';将导致挂载错误，因为在挂载上，从App返回的React元素还没有返回-容器仍然是空的；#feed-bottom元素还不存在。
虽然您可以通过仅在元素实际存在的情况下赋值来修复它，但最好是以反应的方式将值有条件地放入JSX。除非你必须这样做，否则不要在反应中使用普通的DOM方法。
另一个问题是您的侦听器(如onClick={setselected('home')} )在计算时运行(立即)，因为您正在调用setselected函数，而不是将函数作为支持传递给onClick。
您可能还打算在feed-bottom元素中传递feed-bottom(而不是profile)。
要以反应的方式实现您的逻辑，您需要如下所示：
<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'){和类似的代码。
https://stackoverflow.com/questions/73356435
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号