如何在React中提取嵌套JSON对象内的指定字段数据

问题原因 #

直接访问嵌套对象属性时无输出，核心是首次渲染阶段嵌套对象还未完成异步加载赋值，此时访问不存在的对象属性会触发渲染报错，对应位置无内容返回。

解决方案 #

方法1：可选链+默认值兜底（推荐） #

使用ES2020可选链运算符?.逐层判断属性是否存在，避免空值报错，同时可以自定义空值时的展示内容，修改取值逻辑为：
{props.pred?.nastavnik?.name || '暂无数据'}

方法2：逻辑与逐层判断（兼容旧环境） #

如果项目不支持可选链语法，改用逻辑与逐层校验属性存在性：
{props.pred && props.pred.nastavnik && props.pred.nastavnik.name || '暂无数据'}

验证排查提示 #

如果修改后仍然无输出，可以在渲染代码前加一行console.log(props.pred.nastavnik)，确认嵌套对象的属性名是否确实为name，排除拼写、大小写错误问题。

修改后完整代码示例 #

<CardContent>
    <Typography className={classes.title} color="textSecondary" gutterBottom>
        Nastavnik
    </Typography>
    <Typography variant="h5" component="h2">
        {props.pred?.nastavnik?.name || '暂无数据'}
    </Typography>
    <Typography className={classes.title} color="textSecondary" gutterBottom>
        Br studenata
    </Typography>
    <Typography variant="h5" component="h2">
        {props.pred.broj_studenata}
    </Typography>
</CardContent>

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