본문 바로가기

JavaScript/React with Error18

[해결 방법] Hooks can only be called inside of the body of a function component. ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import React from "react"; import { Navigate } from "react-router-dom"; const TempComp = (props) => { const tempHandler = () => { Navigate("/TempPage"); }; return ( Button ); }; export default TempComp; 🚨 다음과 같은 오류 발생 Invalid hook call. Hooks can only be called inside of .. 2023. 6. 25.
[해결 방법] Parsing error: Unexpected reserved word 'await' ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 function addMovieHandler(movie) { const response = await fetch('https://react-http-e9810-default-rtdb.firebaseio.com/movies.json', { method: 'POSt', body: JSON.stringify(movie), headers: { 'Content-Type': 'application/json' } }); } 🚨 다음과 같은 오류 발생 'await' expressions are only allowed within async.. 2023. 6. 7.
[해결 방법] TypeError: Cannot read properties of undefined (reading 'toFixed') ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 import { useDispatch } from "react-redux"; import classes from "./CartItem.module.css"; import { cartActions } from "../../store/cart-slice"; const CartItem = (props) => { const dispatch = useDispatch(); const.. 2023. 6. 7.
[해결 방법] Expected an assignment or function call and instead saw an expression ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import { createSlice } from '@reduxjs/toolkit'; import React from 'react'; const initialState = {count: 0}; const countSlice = createSlice({ name: 'count', initialState, reducers: { increment(state) {state.count + 1}, }, }); export default countSlice; 🚨 다음과 같은 오류 발생 Expected an.. 2023. 6. 5.
[해결 방법] could not find react-redux context value; ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); 🚨 다음과 같은 오류 발생 .. 2023. 6. 5.
[해결 방법] Actions must be plain objects. Use custom middleware for async actions. ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { cat, chick, dog, tiger } from '../../store/modules/animal'; const Animal = () => { const name = useSelector(state => state.animal.name); // a.. 2023. 6. 5.