search

YYsuni / react18-json-view

JSON viewer for react18
https://jv.yysuni.com/
MIT License
236 stars 15 forks source link

"React has detected a change in the order of Hooks called by JsonNode" #46

Open tordans opened 2 weeks ago

tordans commented 2 weeks ago

I am getting react warnings in my dev console in some case where I use JsonView. Anyone know how to prevent this?

Warning: React has detected a change in the order of Hooks called by JsonNode. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useContext
2. undefined                  useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at div
    at NameValue (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:212:22)
    at div
    at ObjectNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:365:23)
    at JsonNode (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:573:21)
    at code
    at JsonView (webpack-internal:///(app-pages-browser)/./node_modules/react18-json-view/dist/es/index.mjs:711:26)
    at details
    at section
    at MapDebugHelper (webpack-internal:///(app-pages-browser)/./app/(map)/changesets/[id]/_components/Map/MapDebugHelper/MapDebugHelper.tsx:21:86)
YYsuni commented 3 days ago

Can you provide a codesandbox for a review.