React: TypeError: func.apply bukan fungsi / Uncaught TypeError: destroy bukan fungsi

Dibuat pada 13 Feb 2019 · 13Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?

Sebuah bug

Apa perilaku saat ini?

Melakukan pengiriman tertentu dengan redux atau hal-hal acak lainnya menyebabkan reaksi crash. Ini berfungsi dengan baik pada react 16.8.0-alpha0 tetapi segera setelah saya memperbarui ke alpha 1 itu macet.

console.js:59 01:27:08.503 › TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at safelyCallDestroy (http://localhost:1212/dist/renderer.dev.js:267167:5)
    at commitUnmount (http://localhost:1212/dist/renderer.dev.js:267504:17)
    at commitNestedUnmounts (http://localhost:1212/dist/renderer.dev.js:267548:5)
    at unmountHostComponents (http://localhost:1212/dist/renderer.dev.js:267809:7)
    at commitDeletion (http://localhost:1212/dist/renderer.dev.js:267861:5)
    at commitAllHostEffects (http://localhost:1212/dist/renderer.dev.js:268602:11)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitRoot (http://localhost:1212/dist/renderer.dev.js:268826:7)
    at completeRoot (http://localhost:1212/dist/renderer.dev.js:270318:3)
    at performWorkOnRoot (http://localhost:1212/dist/renderer.dev.js:270247:9)
    at performWork (http://localhost:1212/dist/renderer.dev.js:270155:7)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
interactiveUpdates$1 @ react-dom.development.js:19964
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4878

01:52:09.074 › TypeError: destroy is not a function
    at commitHookEffectList (http://localhost:1212/dist/renderer.dev.js:267241:11)
    at commitPassiveHookEffects (http://localhost:1212/dist/renderer.dev.js:267270:3)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitPassiveEffects (http://localhost:1212/dist/renderer.dev.js:268691:9)
    at wrapped (http://localhost:1212/dist/renderer.dev.js:298178:34)
    at flushFirstCallback (http://localhost:1212/dist/renderer.dev.js:298513:28)
    at flushWork (http://localhost:1212/dist/renderer.dev.js:298625:11)
    at MessagePort.module.exports../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage (http://localhost:1212/dist/renderer.dev.js:298986:9)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
commitPassiveEffects @ react-dom.development.js:18278
wrapped @ scheduler-tracing.development.js:207
flushFirstCallback @ scheduler.development.js:107
flushWork @ scheduler.development.js:219
module.exports../node_modules/scheduler/cjs/scheduler.development.js.channel.port1.onmessage @ scheduler.development.js:580

Masalahnya sepertinya disebabkan di sini (?):

      function callCallback() {
        // We immediately remove the callback from event listeners so that
        // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
        // nested call would trigger the fake event handlers of any call higher
        // in the stack.
        fakeNode.removeEventListener(evtType, callCallback, false);

        // We check for window.hasOwnProperty('event') to prevent the
        // window.event assignment in both IE <= 10 as they throw an error
        // "Member not found" in strict mode, and in Firefox which does not
        // support window.event.
        if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
          window.event = windowEvent;
        }

        func.apply(context, funcArgs); <---------------------
        didError = false;
      }
...

Jika perilaku saat ini adalah bug, berikan langkah-langkah untuk mereproduksi dan jika mungkin demo minimal dari masalah tersebut. Tempel tautan ke contoh JSFiddle (https://jsfiddle.net/Luktwrdm/) atau CodeSandbox (https://codesandbox.io/s/new) Anda di bawah ini:

Yah, saya tidak begitu tahu cara mereproduksi tetapi Anda dapat menemukan kode aplikasi saya di sini , berikut adalah file-file penting:
configureStore.dev.js -> Memiliki semua konfigurasi redux
ini dan ini hanya tempat acak di mana itu terjadi.
Berikut adalah beberapa log lagi yang mungkin berguna:

Uncaught TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at safelyCallDestroy (react-dom.development.js:16733)
    at commitUnmount (react-dom.development.js:17070)
    at unmountHostComponents (react-dom.development.js:17396)
    at commitDeletion (react-dom.development.js:17427)
    at commitAllHostEffects (react-dom.development.js:18168)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18392)
    at completeRoot (react-dom.development.js:19884)
    at performWorkOnRoot (react-dom.development.js:19813)
    at performWork (react-dom.development.js:19721)
    at performSyncWork (react-dom.development.js:19695)
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
safelyCallDestroy @ react-dom.development.js:16733
commitUnmount @ react-dom.development.js:17070
unmountHostComponents @ react-dom.development.js:17396
commitDeletion @ react-dom.development.js:17427
commitAllHostEffects @ react-dom.development.js:18168
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18392
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
react-dom.development.js:149 Uncaught TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at safelyCallDestroy (react-dom.development.js:16733)
    at commitUnmount (react-dom.development.js:17070)
    at commitNestedUnmounts (react-dom.development.js:17114)
    at unmountHostComponents (react-dom.development.js:17375)
    at commitDeletion (react-dom.development.js:17427)
    at commitAllHostEffects (react-dom.development.js:18168)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at commitRoot (react-dom.development.js:18392)
    at completeRoot (react-dom.development.js:19884)
    at performWorkOnRoot (react-dom.development.js:19813)
    at performWork (react-dom.development.js:19721)
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
safelyCallDestroy @ react-dom.development.js:16733
commitUnmount @ react-dom.development.js:17070
commitNestedUnmounts @ react-dom.development.js:17114
unmountHostComponents @ react-dom.development.js:17375
commitDeletion @ react-dom.development.js:17427
commitAllHostEffects @ react-dom.development.js:18168
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18392
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
react-dom.development.js:16647 The above error occurred in one of your React components:
    in Unknown
    in Suspense
    in Unknown (created by Route)
    in Route (created by RouteDef)
    in StrictMode (created by App)
    in App (created by RouteDef)
    in RouteDef (created by Context.Consumer)
    in Connect(RouteDef) (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (created by Root)
    in div (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Root.
logCapturedError @ react-dom.development.js:16647
logError @ react-dom.development.js:16683
callback @ react-dom.development.js:17616
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
console.js:59 01:56:16.048 › TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at safelyCallDestroy (http://localhost:1212/dist/renderer.dev.js:267167:5)
    at commitUnmount (http://localhost:1212/dist/renderer.dev.js:267504:17)
    at unmountHostComponents (http://localhost:1212/dist/renderer.dev.js:267830:7)
    at commitDeletion (http://localhost:1212/dist/renderer.dev.js:267861:5)
    at commitAllHostEffects (http://localhost:1212/dist/renderer.dev.js:268602:11)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitRoot (http://localhost:1212/dist/renderer.dev.js:268826:7)
    at completeRoot (http://localhost:1212/dist/renderer.dev.js:270318:3)
    at performWorkOnRoot (http://localhost:1212/dist/renderer.dev.js:270247:9)
    at performWork (http://localhost:1212/dist/renderer.dev.js:270155:7)
    at performSyncWork (http://localhost:1212/dist/renderer.dev.js:270129:3)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
react-dom.development.js:16647 The above error occurred in the <SideBar> component:
    in SideBar (created by Context.Consumer)
    in Connect(SideBar) (created by RouteDef)
    in div (created by RouteDef)
    in div (created by RouteDef)
    in StrictMode (created by App)
    in App (created by RouteDef)
    in RouteDef (created by Context.Consumer)
    in Connect(RouteDef) (created by Root)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by Context.Consumer)
    in Connect(ConnectedRouterWithContext) (created by Root)
    in div (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, Root.
logCapturedError @ react-dom.development.js:16647
logError @ react-dom.development.js:16683
callback @ react-dom.development.js:17616
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109
console.js:59 01:56:16.056 › TypeError: func.apply is not a function
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at safelyCallDestroy (http://localhost:1212/dist/renderer.dev.js:267167:5)
    at commitUnmount (http://localhost:1212/dist/renderer.dev.js:267504:17)
    at commitNestedUnmounts (http://localhost:1212/dist/renderer.dev.js:267548:5)
    at unmountHostComponents (http://localhost:1212/dist/renderer.dev.js:267809:7)
    at commitDeletion (http://localhost:1212/dist/renderer.dev.js:267861:5)
    at commitAllHostEffects (http://localhost:1212/dist/renderer.dev.js:268602:11)
    at HTMLUnknownElement.callCallback (http://localhost:1212/dist/renderer.dev.js:250583:14)
    at Object.invokeGuardedCallbackDev (http://localhost:1212/dist/renderer.dev.js:250633:16)
    at invokeGuardedCallback (http://localhost:1212/dist/renderer.dev.js:250690:31)
    at commitRoot (http://localhost:1212/dist/renderer.dev.js:268826:7)
    at completeRoot (http://localhost:1212/dist/renderer.dev.js:270318:3)
    at performWorkOnRoot (http://localhost:1212/dist/renderer.dev.js:270247:9)
    at performWork (http://localhost:1212/dist/renderer.dev.js:270155:7)
consoleLog @ console.js:59
transport @ console.js:35
log @ log.js:25
componentDidCatch @ Root.js:20
callback @ react-dom.development.js:17617
callCallback @ react-dom.development.js:15983
commitUpdateEffects @ react-dom.development.js:16022
commitUpdateQueue @ react-dom.development.js:16010
commitLifeCycles @ react-dom.development.js:16894
commitAllLifeCycles @ react-dom.development.js:18219
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18427
completeRoot @ react-dom.development.js:19884
performWorkOnRoot @ react-dom.development.js:19813
performWork @ react-dom.development.js:19721
performSyncWork @ react-dom.development.js:19695
requestWork @ react-dom.development.js:19564
scheduleWork @ react-dom.development.js:19373
enqueueSetState @ react-dom.development.js:11051
module.exports../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
e @ VM115:1
(anonymous) @ middleware.js:22
(anonymous) @ redux-logger.js:1
(anonymous) @ index.js:11
dispatch @ VM115:1
onLocationChanged @ ConnectedRouter.js:139
handleLocationChange @ ConnectedRouter.js:84
listener @ createTransitionManager.js:46
(anonymous) @ createTransitionManager.js:65
notifyListeners @ createTransitionManager.js:64
setState @ createHashHistory.js:86
(anonymous) @ createHashHistory.js:122
confirmTransitionTo @ createTransitionManager.js:36
handlePop @ createHashHistory.js:120
handleHashChange @ createHashHistory.js:109

Saya mencoba memberi Anda setiap informasi yang saya bisa, jika Anda memerlukan info lebih lanjut, saya akan dengan senang hati membantu

Apa perilaku yang diharapkan?

Yah, itu seharusnya tidak crash kurasa

Versi React yang mana, dan browser/OS mana yang terpengaruh oleh masalah ini?

Ini berfungsi dengan baik pada react 16.8.0-alpha 0 tetapi segera setelah saya memperbarui ke alpha 1 atau lebih baru, crash.

Sumber

killpowa

👍8 ❤4 👎1

Komentar yang paling membantu

TypeError: destroy is not a function

Ini adalah kesalahan sebenarnya, dan menunjukkan bahwa Anda mengembalikan nilai dari useEffect yang bukan merupakan fungsi.

Peringatan: Fungsi Efek tidak boleh mengembalikan apa pun selain fungsi, yang digunakan untuk pembersihan.

@gorilla-devs dapatkah Anda mengonfirmasi bahwa Anda menerima peringatan itu?

Melihat kode yang Anda bagikan, Anda menggunakan fungsi async dengan useEffect banyak, yang tidak didukung dan akan memicu kesalahan ini. Anda harus melakukan apa yang direkomendasikan oleh peringatan:

Sepertinya Anda menulis useEffect(async() => ...) atau mengembalikan Promise. Sebagai gantinya, Anda dapat menulis fungsi async secara terpisah dan kemudian memanggilnya dari dalam efek:

async function fetchComment(commentId) {
  // You can await here
}

useEffect(() => {
  fetchComment(commentId);
}, [commentId]);

aweary pada 13 Feb 2019

👍133 ❤53 🎉37 🚀33 😄13 👀7

Semua 13 komentar

TypeError: destroy is not a function

Ini adalah kesalahan sebenarnya, dan menunjukkan bahwa Anda mengembalikan nilai dari useEffect yang bukan merupakan fungsi.

Peringatan: Fungsi Efek tidak boleh mengembalikan apa pun selain fungsi, yang digunakan untuk pembersihan.

@gorilla-devs dapatkah Anda mengonfirmasi bahwa Anda menerima peringatan itu?

Sepertinya Anda menulis useEffect(async() => ...) atau mengembalikan Promise. Sebagai gantinya, Anda dapat menulis fungsi async secara terpisah dan kemudian memanggilnya dari dalam efek:

async function fetchComment(commentId) {
  // You can await here
}

useEffect(() => {
  fetchComment(commentId);
}, [commentId]);

aweary pada 13 Feb 2019

👍133 ❤53 🎉37 🚀33 😄13 👀7

Bagaimana saya bisa melakukan sesuatu seperti ini?

  useEffect(async () => {
    setNativeLauncherProfiles(await OfficialLancherProfilesExists());
  }, []);

killpowa pada 13 Feb 2019

👀7

lihat jawaban dari @aweary :

async function myAsyncEffect() {
  const hasOfficialLancherProfiles = await OfficialLancherProfilesExists(); 
  setNativeLauncherProfiles(hasOfficialLancherProfiles);
}

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

Atau Anda bisa membungkusnya dalam IIFE atau ... beberapa solusi di stackoverflow

ioss pada 13 Feb 2019

❤6 🎉6 👍6 🚀3 👀1

Bagaimana saya bisa melakukan sesuatu seperti ini?

Jika Anda mencoba untuk melakukan hal ini Anda akan melihat peringatan di konsol yang memberitahu Anda bagaimana untuk melakukan itu dengan benar - termasuk contoh kode. Sudahkah Anda membacanya?

gaearon pada 13 Feb 2019

🎉9 👍9

Peringatannya sangat bagus! Suka sekali! @gaearon

Rolandisimo pada 15 Mar 2019

Saya memiliki masalah serupa yang membantu saya menyelesaikan utas ini:
React.useEffect(() => !property && fetchProperty(setProperty));
(yang mengembalikan nilai boolean false ketika property truthy , yang bukan merupakan fungsi)

Yang harus saya ganti
React.useEffect(() => { if (!property) fetchProperty(setProperty); });

Gsiete pada 12 Jun 2019

👍4

Terima kasih! Saya tidak akan pernah lagi menggunakan useEffect dengan async =)

sirmong pada 6 Agu 2019

👍7

Kami memiliki kesalahan persis seperti yang dilakukan @Gsiete , terima kasih atas komentarnya.

Jeevan-Kishore pada 30 Sep 2019

Saya telah memperbaiki masalah ini dengan memindahkan kode di dalam suatu fungsi dan memanggilnya di dalam useEffect() hook.

const [versionName, setVersionName] = useState(`${version.name} copy`)
const [validationsErrors, setValidationsErrors] = useState('')

  useEffect(() => {
    const runValidation = () => {
      const errors = validation({ versionName })
      if (size(errors) > 0) {
        setValidationsErrors(errors)
        return null
      } else {
        setValidationsErrors(null)
      }
    }
    runValidation()
  }, [versionName])

sagar-gavhane pada 6 Mar 2020

itu terjadi dengan saya

  useEffect(() => {
    const unsubscribe = navigation.addListener('willBlur', () => {
      setPaused(true);
    });
    return unsubscribe;
  }, [navigation]);

  useEffect(() => {
    navigation.addListener('willBlur', () => {
      setPaused(true);
    });
  }, [navigation]);

MoeMamdouh pada 15 Mar 2020

👍5 🎉1

itu terjadi dengan saya

  useEffect(() => {
    const unsubscribe = navigation.addListener('willBlur', () => {
      setPaused(true);
    });
    return unsubscribe;
  }, [navigation]);

  useEffect(() => {
    navigation.addListener('willBlur', () => {
      setPaused(true);
    });
  }, [navigation]);

@MoeMamdouh Terima kasih!

piyush97 pada 26 Apr 2020

untuk memanggil async di dalam useEffect Anda dapat menggunakan fungsi IEFE

useEffect(() => {
    (async () => {
         await asyncCall() 
    })()
}, [])

tipe pengembalian useEffect harus berupa fungsi atau tidak ada yang "tidak terdefinisi". menempatkan async di useEffect membuatnya mengembalikan Janji yang bukan fungsi

EhsanSarshar pada 24 Jun 2020

🎉7 👍5 ❤4 🚀3 👀1 😄1

Saya mendapatkan keduanya karena saya lupa membungkus fungsi async dengan {} di useEffect:

//TypeError: destroy is not a function
useEffect(()=>req()
))
//Uncaught TypeError: func.apply is not a function
useEffect(()=>req(),[])

memperbaiki:

useEffect(()=>{
req()
})

yeecai pada 2 Jul 2020

Apakah halaman ini membantu?

0 / 5 - 0 peringkat

Masalah terkait

Re-render elemen di componentDidMount sekaligus Error:Cannot read property 'rootID' of null.

h1orz · 3Komentar

Hapus event listener yang digunakan dengan bind dalam sintaksis ES6?

UnbearableBear · 3Komentar

Variabel mengacu pada Tanggal baru() tidak bisa menjadi elemen anak.

krave1986 · 3Komentar

[Dokumen] [Pertanyaan] Referensi - Panggilan Balik vs String

hnordt · 3Komentar

React.PropTypes.node harus menerima komponen (fungsi) stateless

MoOx · 3Komentar