lockers表关联Student渲染时出现Cannot read property 'firstName' of null错误

Hey，这个问题我碰到过好多次了！你遇到的Cannot read property 'firstName' of null错误，核心原因很明确：那些未分配的储物柜对应的Student对象是null，你直接去访问它的firstName属性，JS自然会抛出错误。控制台能看到正确数据是因为你能看到完整的 locker 对象（包括那些 Student 为 null 的条目），但渲染时没做 null 检查就直接访问属性，就会炸锅。

下面给你几个实用的解决方案，按简洁度排序：

1. 用可选链操作符（最简洁） #

ES2020及以上版本支持的可选链?.可以完美处理这种场景——如果左侧的对象是null或undefined，它会直接返回undefined，不会抛出错误。结合空值合并运算符??还能给未分配的情况设置默认值：

// 拼接姓名，未分配时显示"未分配"
{`${locker.Student?.firstName ?? ''} ${locker.Student?.lastName ?? ''}`.trim() || '未分配'}

或者更直观的三元判断写法：

{locker.Student ? `${locker.Student.firstName} ${locker.Student.lastName}` : '未分配'}

2. 提前判断+条件渲染 #

如果你的环境不支持可选链（比如旧版React项目），可以用三元表达式或if语句提前判断Student是否存在：

三元表达式写法 #

render() {
  const { locker } = this.props;
  return (
    <div>
      {locker.Student ? (
        <span>{locker.Student.firstName} {locker.Student.lastName}</span>
      ) : (
        <span>未分配</span>
      )}
    </div>
  );
}

变量提前处理写法 #

render() {
  const { locker } = this.props;
  let studentDisplayName = '未分配';
  if (locker.Student) {
    studentDisplayName = `${locker.Student.firstName} ${locker.Student.lastName}`;
  }
  return <div>{studentDisplayName}</div>;
}

3. 预处理数据（一劳永逸） #

如果不想在渲染层反复做判断，可以在获取数据后先预处理，给每个locker添加一个直接可用的姓名字段：

// 假设你从API拿到了lockers数组
const processedLockers = lockers.map(locker => ({
  ...locker,
  studentName: locker.Student 
    ? `${locker.Student.firstName} ${locker.Student.lastName}` 
    : '未分配'
}));

之后在render里直接用locker.studentName就可以了，完全不用再担心null的问题。

内容的提问来源于stack exchange，提问作者Curious-programmer