MERN栈项目About页JSX渲染userData.name报错求助

你遇到的JSX渲染报错是组件初始渲染时读取undefined属性导致的：

• 你定义userData状态时没有设置初始值，默认是undefined
• React组件首次渲染时，useEffect里的接口请求还处于pending状态，userData还没被赋值，此时JSX里直接读取userData.name等价于读取undefined.name，直接触发类型错误
• 你在onClick事件里打印userData.name能正常输出，是因为点击事件触发时接口请求已经完成、userData已经被赋值，自然不会报错。

另外你代码里还有一处隐藏逻辑错误：状态码判断if(!res.status === 200)存在运算符优先级问题，!res.status会先执行，永远返回布尔值false，false === 200永远不成立，导致接口报错时无法进入错误分支跳转登录页。

1. 给userData设置初始值，避免初始渲染读取属性报错
   把状态定义行修改为：

   const [userData, setUserData] = React.useState({});
   

2. 修正状态码判断逻辑
   把原来的错误判断：

   if(!res.status === 200) {
   

   修改为：

   if(res.status !== 200) {
   

3. （可选，更稳妥）增加加载态判断，避免极端场景下的渲染报错
   可以在组件return的最开头增加加载判断，等接口返回数据后再渲染页面内容：

   // 接口未返回数据时显示加载提示
   if (Object.keys(userData).length === 0) {
     return <div className="container mt-4">页面加载中...</div>
   }
   

   也可以在渲染字段时用可选链运算符做兼容，比如把{userData.name}改成{userData?.name}，即使userData为空也不会抛错。

你提供的后端鉴权代码、路由代码逻辑没有问题，不需要修改。按上面步骤改完前端代码后，页面就能正常渲染用户信息了。

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