如何解决Cannot read properties of undefined读取Fiscal Year报错

你仅对最外层的stats变量做了非空判断，没有校验嵌套属性路径上每一层的存在性：API请求是异步流程，组件首次渲染时stats可能已经被初始化为非空值（比如空对象{}），但此时stats['Financial Highlights']的值还是undefined，直接读取它的子属性Fiscal Year就会抛出这个类型错误。
控制台能打印出完整数据是因为console.log对对象类型的输出持有的是对象引用，你手动展开控制台日志时API请求已经完成、对象已经被填充了完整字段，这不能代表组件渲染执行到属性判断逻辑的瞬间，嵌套数据已经加载完成。

用可选链操作符?.做全链路的空值校验，只要属性路径上任意一层不存在，就会短路返回undefined，不会触发属性读取错误，修正后的代码如下：

<Grid >
  <Typography variant="body1">Fiscal Year </Typography>
</Grid>
<TableContainer style={{width: 600, height: 170}}> 
  {stats ? (
    <Table sx={{alignItems: "center", display: ""}}>
      {/* 对嵌套路径的每一层都做存在性判断 */}
      {stats?.['Financial Highlights']?.['Fiscal Year'] ? (
        <TableBody>
          <TableRow hover>
            <TableCell align="left">Fiscal Year Ends</TableCell>
            <TableCell align="right">
              {stats['Financial Highlights']['Fiscal Year']['Fiscal Year Ends'] === null
                ? "N/A"
                : stats['Financial Highlights']['Fiscal Year']['Fiscal Year Ends']}
            </TableCell>
          </TableRow>
          <TableRow hover>
            <TableCell align="left">Most Recent Quarter (mrq)</TableCell>
            <TableCell align="right">
              {stats['Financial Highlights']['Fiscal Year']['Most Recent Quarter (mrq)'] === null
                ? "N/A"
                : stats['Financial Highlights']['Fiscal Year']['Most Recent Quarter (mrq)']}
            </TableCell>
          </TableRow>
        </TableBody>
      ) : "Loading"}
    </Table>
  ) : <div>Loading...</div>}                        
</TableContainer>

可选优化方案 #

• 初始化stats状态时就预设好嵌套结构的默认值，比如const [stats, setStats] = useState({ 'Financial Highlights': { 'Fiscal Year': null } })，从根源上避免中间层属性为undefined的问题
• 如果项目使用TypeScript，给stats定义明确的嵌套类型，可以在编译阶段提前发现这类非法属性访问问题

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