JSX条件渲染未定义变量

Question

我正在使用JSX on创建前端页面，但是我遇到了"未定义"的问题。导致我的前端无法加载的错误。我正在从后端检索userInfo，并且有一个特定的值，streakLength，我想用于条件渲染。我正在声明另一个const, onStreak，它初始化为false，但如果streakLength为>= 3，则设置为true。问题是，这个onStreak const被读取为未定义，并导致我的页面崩溃。老实说，我更希望有一种方法可以简单地在html中执行>=操作，但这是我尝试的变通方法。请找到下面的代码，任何帮助将不胜感激:

const [surveyNotification, setSurveyNotification] = useState([]);
const [onStreak, setOnStreak] = React.useState(false);
useEffect(() => {
async function fetchData() {
try {
const userInfo = await AuthService.getUserInfo();
// This retrieves the top 30 users based of points
setSurveyNotification(await UserService.getNotifications(userInfo.id));

console.log(surveyNotification);

if(parseInt(userInfo.streakLength) > 2){
setOnStreak(true);
}

console.log(onStreak);
} catch (error) {
console.error(error);
}
}
fetchData();
}, []);

这是JSX

<li className="nav-item dropdown pe-2 d-flex align-items-center" >
<a href="javascript:;" className="nav-link text-white p-0" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" style={{ paddingBottom: "-100px", marginLeft: "10px" }}>
{ onStreak ?  <span>🔥 userInfo.streakLength</span> : <span></span>}
</a>
</li>

最后是我的错误，它发生在上面的条件语句"onStreak?…">

WARNING in [eslint]
srccomponentstopNavbarindex.js
Line 232:19:  'onStreak' is not defined  no-undef
webpack compiled with 1 warning

Answer 1

在没有看到组件作为一个整体的情况下不能确定，但是你确定onStreak是问题吗?你发布的错误只是一个警告，所以它不应该使你的页面崩溃。

对于这部分:

{ onStreak ?  <span>🔥 userInfo.streakLength</span> : <span></span>}</a>

这将只显示文本userInfo.streakLength，因为它应该是{userInfo.streakLength}，所以可能有什么问题。