无法在 React 中的 useEffect 或 useCallback 中读取依赖项数组中未定义对象的属性

Question

我下面有一个 useCallback() 方法来提高性能。这与 useEffect()

的逻辑相同

如果我有一个依赖router.asPath，但有时router为null，这可能会导致函数崩溃。

为了提高性能，我不想把router的整个对象，随着其他字段的变化，我不想重新运行函数。

有什么建议吗？

  const recordProduct = useCallback(() => {
    dispatch(setNextCollectionScroll(router.asPath, hit.handle))
  }, [dispatch, hit.handle, router])

理想的依赖：[dispatch, hit.handle, router.asPath] 但我现在必须这样做：由于 router 对象可能为空：[dispatch, hit.handle, router]

Answer 1

不清楚你使用的是什么路由器，如果你应该去别处看看，但在检查 useEffect 和 useCallback 中的依赖关系的简单情况下，你可以使用 Optional chaining 来自 JS.

const recordProduct = useCallback(() => {
  dispatch(setNextCollectionScroll(router.asPath, hit.handle))
}, [dispatch, hit.handle, router?.asPath])

当 router 为 null 时，? 将跳过尝试获取 asPath 并且您不会收到运行时错误。

旁注
在我看来，您应该始终在您所依赖的对象中使用特定的属性，尤其是当您使用第三方库时，因为它们可能会 return 相同的对象引用不同的值（这应该被标记为写得不好的库，但以防万一取决于属性）。

更容易跟踪数据流以及触发特定依赖项挂钩的原因。

Cannot Read Property of undefined Object in dependencies array in useEffect or useCallback in React