React访问对象子属性异常：刷新页面无法读取snippet.title

附上出现问题的代码：

import React from "react";

const VideoDetails = ({ info }) => {
  const { snippet, statistics } = info;
  console.log(snippet);
  return (
    <div>
      <h1>{snippet.title}</h1>
    </div>
  );
};

export default VideoDetails;

遇到的问题：

• 首次运行时能正常获取snippet.title并在UI显示，但刷新页面就会报错
• 无论刷新多少次，console.log(snippet)都能打印出包含title的完整snippet对象，但直接访问其子属性就会报错

控制台打印的snippet示例：

{publishedAt: '2024-04-18T04:10:49Z', channelId: 'UCl_vAxZpvbO-PFXdDu7EdHw', title: 'I JOINED A BIG GANG IN NEW GANGSTER CITY', description: 'Join the Best GTA RP Server Grand RP!!!\nhttps://gt…here I post gaming videos & live stream everyday.', thumbnails: {…}, …}

这是React组件渲染时序导致的问题：

1. 为什么console.log能看到完整对象，但访问子属性报错？
   浏览器的console会异步更新对象展示——组件首次渲染时，info大概率还没拿到异步数据，是undefined或null，此时解构出的snippet也是undefined，直接访问snippet.title就会抛错；等后续异步数据加载完成，snippet被更新，浏览器会把console里的对象补全成最新状态，所以你能看到完整数据，但报错已经发生了。

2. 解决方案
   只要在访问嵌套属性前，先判断上层对象是否存在即可，几种常用写法：

   • 写法1：短路运算符判断

     const VideoDetails = ({ info }) => {
       // 先给info兜底空对象，避免解构报错
       const { snippet, statistics } = info || {};
       console.log(snippet);
       // 只有snippet存在时才渲染标题
       return (
         <div>
           {snippet && <h1>{snippet.title}</h1>}
         </div>
       );
     };
     

   • 写法2：可选链操作符（ES6+）

     const VideoDetails = ({ info }) => {
       console.log(info?.snippet);
       return (
         <div>
           <h1>{info?.snippet?.title || '加载中...'}</h1>
         </div>
       );
     };
     

   • 写法3：条件渲染加载状态

     const VideoDetails = ({ info }) => {
       // 数据未加载完成时显示加载提示
       if (!info?.snippet) {
         return <div>加载中...</div>;
       }
       const { snippet } = info;
       return (
         <div>
           <h1>{snippet.title}</h1>
         </div>
       );
     };
     

核心逻辑就是：确保React在异步数据加载完成前，不会去访问不存在的嵌套属性。

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