React出现Uncaught TypeError，控制台可见数据却无法读取属性

1. 解决「Cannot read properties of undefined」错误 #

组件初始化时request是空对象，此时直接访问request.user.email会因request.user为undefined触发报错，可通过两种方式处理：

方式一：使用可选链操作符（推荐） #

在嵌套属性访问时添加?.，避免链式访问中出现undefined导致报错：

<Card key={request.id}>
  <Card.Header>{request.user?.email}</Card.Header>
  <Card.Body>
    <Card.Title>{request.address}</Card.Title>
    <Card.Text>
      {request.description}<br/>
      {request.kind}
    </Card.Text>
  </Card.Body>
</Card>

方式二：条件渲染 #

判断request.user存在后再渲染对应内容：

{request.user && (
  <Card key={request.id}>
    <Card.Header>{request.user.email}</Card.Header>
    <Card.Body>
      <Card.Title>{request.address}</Card.Title>
      <Card.Text>
        {request.description}<br/>
        {request.kind}
      </Card.Text>
    </Card.Body>
  </Card>
)}

2. 解决「.map() is not a function」错误 #

从返回数据结构来看，user是单个对象而非数组，map()仅能用于数组遍历，直接调用必然报错：

• 若需求是渲染单个user的属性：直接通过request.user.xxx访问即可，无需使用map；
• 若接口预期返回user数组但实际返回单个对象：可在前端将其转为数组后再使用map，比如setRequests({...res.data, user: [res.data.user]})，同时需检查后端接口返回格式是否符合预期。

另外注意state变量名笔误：const [request, setRequests] = useState({});建议改为setRequest（单数），避免后续维护混淆。

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