React前端空白且报错：无法解构undefined的'title'属性，求解决

核心错误原因 #

报错Uncaught TypeError: Cannot destructure property 'title' of 'list' as it is undefined.说明List组件接收到的list属性是undefined，直接解构title就会抛出错误。以下是具体排查和修复步骤：

1. 修复Home组件的axios请求语法错误 #

你的Home组件中，axios.get的参数多了一个多余的逗号，这会直接导致请求无法正常发送，setLists永远不会被执行：

// 错误代码
const response = await axios.get(
  `lists`,
  ,{ // 这里多了一个逗号，属于语法错误
    headers: {
      token: "Bearer //my jwt token"
     },
    }
);

// 修复后
const response = await axios.get(
  `lists`,
  {
    headers: {
      token: "Bearer //my jwt token"
    }
  }
);

2. 确认后端返回的数据结构正确 #

打开浏览器控制台，查看console.log(response)的输出：

• 确保response.data是包含多个对象的数组，每个对象必须有title和content属性
• 如果后端返回的是嵌套结构（比如{ data: [...] }），需要修改赋值逻辑：setLists(response.data.data)

3. 给List组件加兜底防御 #

即使数据正常，也可能因为异步请求未完成、数据异常等情况导致list为undefined，必须在List组件中做防御性处理：

function List({list}) {
  // 方式1：如果list不存在，直接不渲染或显示加载提示
  if (!list) return null;

  // 方式2：用可选链+默认值兜底
  const {title = '', content = []} = list || {};

  // ... 剩余逻辑
}

4. 补全List组件的缺失内容 #

你的List组件还有两处功能缺失：

• 标题未渲染：把空的span改成{title}
• 内容未渲染：在container里循环渲染ListItem

// 修复标题
<span className="listTitle">{title}</span>

// 修复内容渲染
<div className="container" ref={listRef}>
  {content.map(item => (
    <ListItem key={item._id} item={item} />
  ))}
</div>

5. 验证JWT令牌有效性 #

在浏览器Network面板查看lists请求的状态码：

• 如果是401/403，说明令牌过期或无效，后端拒绝返回数据，lists会保持为空数组
• 确认令牌格式正确（Bearer +令牌字符串，注意空格）

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