React JS使用useState时出现userData is not defined报错如何解决？

错误原因 #

你当前的报错是因为useState初始化userData时没有设置初始值，默认值为undefined。组件首次渲染时，useEffect里的异步接口请求还没有执行完成，此时渲染逻辑直接访问userData.name，读取undefined的属性就会触发类型错误。

修复方案 #

方案1：给state设置初始默认值 #

将userData的初始化代码修改为：

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

空对象作为初始值，此时访问userData.name会返回undefined，不会抛出错误。

方案2：使用可选链语法访问属性 #

把模板里的{userData.name}替换为：

{userData?.name}

可选链?.会自动判断左边的变量是否为null/undefined，是的话直接返回undefined，不会抛出异常。

方案3：增加加载态判断 #

在return的渲染逻辑前先判断userData是否存在，不存在时显示加载提示：

if (!userData) {
  return <div>加载中...</div>
}

// 后面放置原来的return渲染逻辑

额外代码问题修复 #

你当前的接口状态判断逻辑存在错误，运算符优先级问题会导致状态校验不生效：

// 原错误写法，!优先级高于===，实际执行逻辑是 (!res.status) === 200，永远为false
if (!res.status === 200) 

// 修改为
if (res.status !== 200)

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