基于React Redux：避免书籍列表页重复调用API的技术问询

嘿，这个问题在路由切换的场景里太常见啦！当你从书籍详情页切回列表页时，列表页组件往往会被重新挂载，原来写在componentWillMount里的API调用就会再次触发——这就是为啥会重复请求的原因。而我们既然已经把书籍数据存在books状态里了，完全可以复用这份数据，不用每次都去拉取~

要避免额外的API调用，在列表页里你需要检查两个核心条件：

• 检查books状态是否已有有效数据：比如判断this.props.books是不是一个非空数组，或者是否包含你需要的书籍信息（比如有没有id、标题这些必填字段）。如果数据已经存在，就跳过API调用。
• （可选）检查是否需要强制刷新：如果你的业务场景里存在需要主动刷新列表的情况（比如用户手动触发刷新），可以额外加一个状态标记（比如shouldRefresh），只有当这个标记为true或者没有现有数据时，才调用API。

针对你给出的代码示例，修改后的逻辑应该是这样的：

componentWillMount() {
  // 只有当books为空或者没有数据时，才调用API拉取
  if (!this.props.books || this.props.books.length === 0) {
    this.props.fetchBooks(getUserId());
  }
}

如果是用函数组件+React Hooks的写法，逻辑类似，放在useEffect里：

useEffect(() => {
  // 同样先判断现有数据是否存在
  if (!books || books.length === 0) {
    fetchBooks(getUserId());
  }
}, []); // 空依赖数组确保只在组件挂载时执行一次判断

这里要注意哦：如果你的books状态是存在全局状态管理工具（比如Redux、Zustand）里的，那么即使列表页组件被卸载再挂载，this.props.books（或者hooks里的books变量）依然会保留之前的缓存数据，这样判断逻辑就能正常生效啦。

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