React應用裡Invalid hook call錯誤訊息的處理

i042416發表於2020-02-20
ReactHook

今天我做React開發時，遇到如下的錯誤訊息：

> Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)

2. You might be breaking the Rules of Hooks

3. You might have more than one copy of React in the same app

See  fb.me/react-invalid-hoo  for tips about how to debug and fix this problem.

React應用裡Invalid hook call錯誤訊息的處理 React應用裡Invalid hook call錯誤訊息的處理

這個錯誤輸出已經提醒了我，出錯誤的程式碼在我的應用程式MyApp.jsx裡：

React應用裡Invalid hook call錯誤訊息的處理


原來是我這段const變數初始化程式碼寫到function外部了：

React應用裡Invalid hook call錯誤訊息的處理


將其移至內部後錯誤消失：

React應用裡Invalid hook call錯誤訊息的處理 React應用裡Invalid hook call錯誤訊息的處理


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2676311/，如需轉載，請註明出處，否則將追究法律責任。

相關文章