도저히 에러를 잡을 수 없어 질문드립니다 TT

Question

× 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem. ▶ 2 stack frames were collapsed. usePromise C:/Users/98_07/Desktop/노드리액트/src/usePromise.ts:10 7 | }) ; 8 | const isMounted = useRef( false ) ; 9 | useEffect(() => { > 10 | isMounted . current = true ; | ^ 11 | if ( ! promiseOrFn) { 12 | setState({ 13 | loading : false , View compiled ▶ 2 stack frames were collapsed. Module../src/index.js C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/src/index.js:20 17 | 18 | ReactDOM . render( 19 | < Provider > 20 | store = {createStoreWithMiddleware( 21 | Reducer , 22 | window . __REDUX_DEVTOOLS_EXTENSION__ && // google redux 확장 사용 위함 23 | window . __REDUX_DEVTOOLS_EXTENSION__() View compiled __webpack_require__ C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:784 781 | } ; 782 | 783 | // Execute the module function > 784 | modules[moduleId] . call(module . exports , module , module . exports , hotCreateRequire(moduleId)) ; | ^ 785 | 786 | // Flag the module as loaded 787 | module . l = true ; View compiled fn C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:150 147 | ) ; 148 | hotCurrentParents = [] ; 149 | } > 150 | return __webpack_require__(request) ; | ^ 151 | } ; 152 | var ObjectFactory = function ObjectFactory (name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:701:18 __webpack_require__ C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:784 781 | } ; 782 | 783 | // Execute the module function > 784 | modules[moduleId] . call(module . exports , module , module . exports , hotCreateRequire(moduleId)) ; | ^ 785 | 786 | // Flag the module as loaded 787 | module . l = true ; View compiled checkDeferredModules C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:45 42 | } View compiled Array.webpackJsonpCallback [as push] C:/Users/98_07/Desktop/노드리액트/boiler-plate/client/webpack/bootstrap:32 29 | deferredModules . push . apply(deferredModules , executeModules || []) ; 30 | 31 | // run deferred modules when all chunks ready > 32 | return checkDeferredModules() ; | ^ 33 | } ; 34 | function checkDeferredModules() { 35 | var result ; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:65 This screen is visible only in development. It will not appear if the app crashes in production. 위에가 화면이 뜨는 에러 사항이고 특별히 react나 react dom의 중복 없는 것 같고 코드도 몇번이고 확인해 보았으나 오류 원인을 찾기가 힘이 듭니다. 연관 있을 법한 파일들을 올려 봅니다.... client > pacakge.json { "name" : "client" , "version" : "0.1.0" , "private" : true , "dependencies" : { "@testing-library/jest-dom" : "^4.2.4" , "@testing-library/react" : "^9.5.0" , "@testing-library/user-event" : "^7.2.1" , "axios" : "^0.20.0" , "http-proxy-middleware" : "^1.0.5" , "react" : "^16.13.1" , "react-dom" : "^16.13.1" , "react-native" : "^0.63.3" , "react-redux" : "^7.2.1" , "react-scripts" : "3.4.3" , "redux" : "^4.0.5" , "redux-promise" : "^0.6.0" , "redux-thunk" : "^2.3.0" }, "scripts" : { "start" : "react-scripts start" , "build" : "react-scripts build" , "test" : "react-scripts test" , "eject" : "react-scripts eject" }, "eslintConfig" : { "extends" : "react-app" }, "browserslist" : { "production" : [ ">0.2%" , "not dead" , "not op_mini all" ], "development" : [ "last 1 chrome version" , "last 1 firefox version" , "last 1 safari version" ] } } server > package.json { "name" : "boiler-plate" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "start" : "node server/index.js" , "backend" : "nodemon server/index.js" , "test" : "echo \" Error: no test specified \" && exit 1" , "dev" : "concurrently \" npm run backend \" \" npm run start --prefix client \" " }, "author" : "ooo", "license" : "ISC" , "dependencies" : { "antd" : "^4.6.6" , "bcrypt" : "^5.0.0" , "body-parser" : "^1.19.0" , "concurrently" : "^5.3.0" , "cookie-parser" : "^1.4.5" , "express" : "^4.17.1" , "jsonwebtoken" : "^8.5.1" , "mongoose" : "^5.10.7" , "react-promise" : "^3.0.2" , "react-router-dom" : "^5.2.0" }, "devDependencies" : { "nodemon" : "^2.0.4" } } LoginPage.js import React , { useState } from 'react' ; import Axios from 'axios' ; import { useDispatch } from 'react-redux' ; import { loginUser } from '../../../_action/user_action' ; function LoginPage () { const dispatch = useDispatch (); const [ Email , setEmail ] = useState ( '' ); // useState 안에 들어가는 내용은 초기 상태 const [ Password , setPassword ] = useState ( '' ); // Password(state) -> 유저가 입력한 내용이 들어감 const onEmailHandler = ( event ) => { setEmail ( event . currentTarget . value ); }; // 타이핑을 즉시 반영하기 위함 const onPasswordHandler = ( event ) => { setPassword ( event . currentTarget . value ); }; const onSubmitHandler = ( event ) => { event . preventDefault (); //아무 것도 ( 이메일이나 비밀번호 입력)하지 않아도 버튼을 누르면 페이지가 리프레쉬됨 let body = { email : Email , password : Password , }; dispatch ( loginUser ( body )); //redux 사용, LoginUser == action /* 해당 내용은 LoginUser action에서 처리 Axios.post('api/users/login', body) .then(response =>{ })*/ }; return ( < div style = { { display : 'flex' , justifyContent : 'center' , alignItems : 'center' , width : '100%' , height : '100vh' , } } > < form style = { { display : 'flex' , flexDirection : 'column' } } onSubmit = { onSubmitHandler } > < label > Email < input type = 'email' value = { Email } onChange = { onEmailHandler } /> < label > Password < input type = 'password' value = { Password } onChange = { onPasswordHandler } /> < br /> < button > Login ); } export default LoginPage ;

강민석 · Answer

혹시 어떻게 해결하셨나요??