React项目报错：Cannot read property 'length' of null 求助

嗨，我来帮你排查这个报错的原因～

你遇到的Cannot read property 'length' of null错误，核心问题在于组件初始渲染时photos的值是null，但你直接尝试访问它的length属性。

具体来说：

• 你的组件初始state里photos被设为null
• 组件第一次渲染时，axios的请求还没完成，state里的photos还是null
• 这时候调用showMedia函数，执行props.photos.length就会触发报错，因为null没有length属性

几种可行的修复方案： #

方案1：初始state设为空数组

把构造函数里的初始state改成空数组，这样即使请求还没返回，photos也是一个有length属性的数组：

constructor(props) {
  super(props);
  this.state = { photos: [] }; // 把null换成[]
}

方案2：增加空值判断

在访问length之前先确认photos不是null/undefined：

showMedia = (props) => {
  return (
    <div>
      { props.photos && props.photos.length > 0 && <div>
        {props.photos.map((photo) => photo.title)}
      </div> }
    </div>
  );
}

方案3：使用可选链操作符（ES2020+）

如果你的项目支持ES2020及以上语法，可以用更简洁的可选链来避免报错：

showMedia = (props) => {
  return (
    <div>
      { props.photos?.length > 0 && <div>
        {props.photos.map((photo) => photo.title)}
      </div> }
    </div>
  );
}

另外小提醒：map函数里最好给每个元素加上唯一的key属性，比如{props.photos.map((photo) => <span key={photo.id}>{photo.title}</span>)}，这样React的渲染会更高效哦～

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