React食谱应用：如何从嵌套数组最后项获取_links中的href？

报错的核心原因是在部分渲染阶段，data[data.length - 1]为undefined——比如组件初始化时data是空数组，或者异步加载的数据还未返回，此时强行访问_links就会触发Cannot read properties of undefined错误（控制台能得到预期结果，大概率是后续渲染时数据已就绪，但初始渲染的报错未被捕获）。

解决方法 #

1. 可选链操作符（简洁推荐）

利用ES2020的可选链语法，自动跳过不存在的属性访问，避免报错：

const nextPage = data[data.length - 1]?._links?.next?.href;

如果某一层属性不存在，nextPage会返回undefined，后续逻辑可根据这个值判断是否显示“加载更多”按钮。

2. 显式条件判断

如果需要兼容旧环境，或要做更复杂的状态处理，可以先判断数据存在性：

let nextPage = null;
// 依次确认数组有数据、最后一项存在、next链接存在
if (data.length > 0 && data[data.length - 1] && data[data.length - 1]._links?.next) {
  nextPage = data[data.length - 1]._links.next.href;
}

额外排查点 #

• 确认数据追加逻辑：点击加载更多时，新数据是否正确被push到data数组中，而非被覆盖。
• 增加加载状态：在请求数据期间，禁用“加载更多”按钮，避免重复点击导致数据状态异常。

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