React使用Axios请求API渲染时报Cannot read properties of undefined错误如何解决

• 你给model对应的useState没有设置初始值，第一次组件渲染时model的值为undefined，此时直接读取undefined.slug就会抛出TypeError。
• 你看到控制台能打印出model.slug是浏览器控制台的特性：控制台打印引用类型数据时保存的是对象引用，等你手动点击展开查看属性时，异步请求已经执行完成，setModel已经给model赋值成功，所以能看到slug的值，实际第一次渲染执行console.log的时候model还是undefined。

你可以任选以下任意一种方案解决：

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

const [model, setModel] = useState({})

读取空对象的不存在属性只会返回undefined，不会抛出错误。

2. 使用可选链操作符做安全访问
   修改渲染部分的代码为：

return (
  <div>
   {model?.slug} : {model?.name}
  </div>
)

可选链?.会在左侧值为undefined/null时直接返回undefined，不会尝试读取后续属性，避免报错。

3. 增加加载状态判断
   在return前先判断model是否存在，不存在时渲染加载提示：

if (!model) return <div>数据加载中...</div>

return (
  <div>
   {model.slug} : {model.name}
  </div>
)

这种方式还可以给用户明确的加载提示，体验更好。

内容的提问来源于stack exchange，提问作者Yusuf Yeşilyurt