React 18 - destroy 不是函数

Question

我的应用程序运行良好，然后我将其更新为 React 18，现在如果当前路由正在使用 useEffect 在加载。我在这方面搜索了互联网，但每个问题都与这个问题无关。也许 React 18 是新的，这就是为什么我找不到解决方案的原因.. 虽然当我重新加载同一页面时它加载完美。就在我浏览应用程序崩溃时。如果我评论 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 中删除异步，现在它工作正常。

//on mount useEffect
  useEffect(() => {
    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);
    }
  };

Answer 2

问题

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

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

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

解决方案

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

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

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

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

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

React 18 - destroy 不是函数

React 18 - destroy is not a function

javascript

reactjs

react-hooks

use-effect

问题

解决方案