How to deal with Invalid hook call error message in React application

This article mainly introduces "how to deal with Invalid hook call error messages in React applications". In daily operation, I believe many people have doubts about how to deal with Invalid hook call error messages in React applications. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to deal with Invalid hook call error messages in React applications". Next, please follow the editor to study!

Today, when I was doing React development, I encountered the following error message:

> 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 https://k-call for tips about how to debug and fix this problem.

This error output has reminded me that the error code is in my application MyApp.jsx:

It turns out that my const variable initialization code is written outside the function:

The error disappears after moving it inside:

At this point, the study on "how to deal with Invalid hook call error messages in React applications" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!