React 18 - destroy 不是一个函数

Question

我的应用程序工作正常，然后我将其更新为 React 18，现在，当我从一条路线导航到另一条路线时（如果当前路线使用 useEffect 在加载时调用某些 API），它会抛出“destroy is not a function”。我在这方面搜索过互联网，但每个问题都与此问题无关。也许反应 18 是新的，这就是为什么我找不到解决方案。尽管当我重新加载同一页面时，它加载得很好。就在我导航时应用程序崩溃了。如果我评论 useEffect 一切正常

这是我的 useEffect 代码

//on mount useEffect
  useEffect(async () => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };

这是我得到的错误

Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at commitHookEffectListUnmount (react-dom.development.js:22932:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:24874:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:24824:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24732:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24717:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26847:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at commitRootImpl (react-dom.development.js:26752:1)
    at commitRoot (react-dom.development.js:26517:1)
safelyCallDestroy @ react-dom.development.js:22768
commitHookEffectListUnmount @ react-dom.development.js:22932
commitPassiveUnmountInsideDeletedTreeOnFiber @ react-dom.development.js:24874
commitPassiveUnmountEffectsInsideOfDeletedTree_begin @ react-dom.development.js:24824
commitPassiveUnmountEffects_begin @ react-dom.development.js:24732
commitPassiveUnmountEffects @ react-dom.development.js:24717
flushPassiveEffectsImpl @ react-dom.development.js:26847
flushPassiveEffects @ react-dom.development.js:26801
commitRootImpl @ react-dom.development.js:26752
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
react_devtools_backend.js:3973 The above error occurred in the <Cases> component:

    at Cases (http://localhost:3000/static/js/bundle.js:5474:77)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:3973
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
react-dom.development.js:22768 Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at commitHookEffectListUnmount (react-dom.development.js:22932:1)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:24874:1)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:24824:1)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24732:1)
    at commitPassiveUnmountEffects (react-dom.development.js:24717:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26847:1)
    at flushPassiveEffects (react-dom.development.js:26801:1)
    at commitRootImpl (react-dom.development.js:26752:1)
    at commitRoot (react-dom.development.js:26517:1)

Answer 1

问题

钩子useEffect回调必须是同步函数。

useEffect(async () => {
  getCases()
}, []);

该async函数隐式返回一个 Promise 对象，React 框架错误地将其解释为返回的清理函数。当组件因导航而卸载时，这会导致错误。

解决方案

回调没有理由是async，它没有调用它需要的任何异步代码await。删除async关键字。

useEffect(() => {
  getCases()
}, []);

为了将来参考，如果您需要在回调async中使用 an useEffect，请在回调中本地定义它，然后调用它。

useEffect(() => {
  const asyncFn = async () => { .... };
  asyncFn();
}, []);

或者像您一样在外部，请记住任何 linter 都可能会抱怨缺少依赖项。