React报错：无法读取undefined对象的title属性（附代码/错误/对象截图）

你遇到的问题是典型的初始渲染时对象未就绪导致的：

• React组件首次渲染时，你的对象可能还没完成数据加载（比如异步请求还没返回），此时对象是undefined或null，直接访问.title就会抛出无法读取属性的错误
• 而注释JSX后用console.log能正常输出，是因为console.log执行时数据已经加载完成了，和组件初始渲染的时机不一样

解决方法有这几种：

1. 使用可选链操作符，直接在访问属性时添加?.，避免报错：

   {yourObject?.title}
   

2. 添加存在性判断，确保对象存在后再访问属性：

   {yourObject && yourObject.title}
   

3. 设置初始默认值，在组件的state里给对象初始化一个空对象：

   const [yourObject, setYourObject] = useState({})
   

4. 条件渲染，当对象未加载时显示加载状态，加载完成后再渲染属性：

   {yourObject ? <span>{yourObject.title}</span> : <span>加载中...</span>}
   

内容的提问来源于stack exchange，提问作者Callan George