React依赖型useEffect中abort()调用报错问题求助

问题根源 #

组件挂载时，第二个useEffect的依赖book初始值大概率是undefined或空对象，此时不会进入if (book._id !== undefined)分支，promise1和promise2始终为undefined。当组件卸载（或book更新触发清理逻辑）时，直接调用promise1.abort()就会抛出"Cannot read properties of undefined"错误。

修复方案 #

1. 给清理函数添加Promise存在性检查

在调用abort()前先判断变量是否存在，避免访问undefined的属性：

useEffect(() => {
  let promise1, promise2
  if (book?._id) { // 用可选链优化，避免book为undefined时访问_id报错
    promise1 = dispatch(getComments(book._id))
    promise2 = dispatch(relatedBooks({ genre: book.genre }))
  }
  return () => {
    // 可选链写法，安全调用abort
    promise1?.abort()
    promise2?.abort()

    // 也可以用if判断的写法：
    // if (promise1) promise1.abort()
    // if (promise2) promise2.abort()
  }
}, [book, dispatch]) // 补充dispatch到依赖数组，消除React lint警告

2. 完善第一个useEffect的依赖数组

第一个useEffect的依赖数组缺少bookId和dispatch，会导致bookId变化时无法重新触发请求，还会触发React的lint警告，建议修正：

useEffect(() => {
  const promise = dispatch(bookDetails(bookId))
  return () => promise.abort()
}, [bookId, dispatch])

额外说明 #

• 使用book?._id替代book._id !== undefined，可以同时处理book为undefined或null的情况，代码更健壮。
• 所有useEffect的依赖数组必须包含所有用到的外部变量，避免出现闭包陷阱或不符合预期的渲染行为。

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