ReactJs报错Cannot read properties of undefined (reading 'name') 控制台有数据无法使用

• 初始状态userData未赋值默认是undefined：你声明state时没有设置初始值，组件第一次渲染的时机早于useEffect内接口请求的返回时机，此时userData还没有被赋值，直接访问userData.name就会触发「读取undefined的name属性」的报错。
• 额外的代码逻辑问题：你写的状态判断if(!res.status===200)存在运算符优先级错误，等价于(!res.status) === 200，永远不会触发错误抛出逻辑，后续接口返回非200状态码时无法正常捕获错误跳转登录页。

以下三种方案任选其一即可解决渲染报错问题：

1. 给state设置初始空对象
   把state声明修改为：

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

空对象访问不存在的属性只会返回undefined，不会抛出错误，等接口数据返回后会自动触发重渲染展示正确内容。

2. 使用可选链做安全访问
   把渲染部分的属性访问全部改为可选链写法：

Name:{userData?.name}
<br />
Id:{userData?._id}
<br />
Email:{userData?.email}
<br />
Phone:{userData?.phone}
<br />
Work:{userData?.work}

可选链?.会在左侧值为undefined/null时直接返回undefined，不会抛出错误。

3. 增加加载态判断
   在渲染时先判断userData是否存在，不存在时展示加载提示，存在再渲染用户信息，示例代码：

return (
    <div className="abt-body">
        <div className=" d-flex justify-content-center align-items-center about">
            {userData ? (
                <>
                    Name:{userData.name}
                    <br />
                    Id:{userData._id}
                    <br />
                    Email:{userData.email}
                    <br />
                    Phone:{userData.phone}
                    <br />
                    Work:{userData.work}
                </>
            ) : <p>数据加载中...</p>}
        </div>
        <div class="card-footer text-muted d-flex justify-content-center align-items-center">
            Designed and Developed by : Harsh Raj Ambastha
        </div>
    </div>
)

另外请务必修正状态判断逻辑为if(res.status !== 200)，保证接口异常时可以正常捕获错误跳转登录页。

内容的提问来源于stack exchange，提问作者Harsh Raj Ambastha