hooks 에러?? 문제 질문드립니다.
862
SY J
작성한 질문수 1
0
검색 했을 경우 hooks 문제인 것 같은데 어느 부분의 문제인지를 모르겠습니다. 이 전 까지는 문제가 없어서 드래그 앤 드랍 강의에서 건든 Lists.js 파일에서 뭔가 잘 못 된것 같은데 간단한 오류인 건지 찾을 수가 없어서 문의 드립니다.
아래는 Lists.js 의 전 파일이며
저의 깃허브 링크는
https://github.com/gardenia0917/clone-coding-list/tree/main/react-todo-app
여기 입니다.
감사합니다 ㅜㅜ
import React from "react";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
export default function List({ todoData, setTodoData }) {
const handleCompleteChange = (id) => {
let newTodoData = todoData.map((data) => {
if (data.id === id) {
data.completed = !data.completed;
}
return data;
});
setTodoData(newTodoData);
};
const handleClick = (id) => {
let newTodoData = todoData.filter((data) => data.id !== id);
console.log("newTodoData", newTodoData);
setTodoData(newTodoData);
};
const handleEnd = (result) => {
if (!result.destination) return;
const newTodoData = todoData;
const [reorderedItem] = newTodoData.splice(result.source.index, 1);
newTodoData.splice(result.destination.index, 0, reorderedItem);
setTodoData(newTodoData);
};
return (
<div>
<DragDropContext onDragEnd={handleEnd}>
<Droppable droppableId="to-dos">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{todoData.map((data, index) => (
<Draggable
key={data.id}
draggableId={data.id.toString()}
index={index}
>
{(provided, snapshot) => (
<div
key={data.id}
{...provided.draggableProps}
ref={provided.innerRef}
{...provided.dragHandleProps}
className={`${
snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"
} flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 bg-grey-100 border rounded`}
>
<div className="items-center">
<input
type="checkbox"
defaultChecked={false}
onChange={() => handleCompleteChange(data.id)}
/>
<span
className={
data.completed ? "line-through" : undefined
}
>
{data.title}
</span>
</div>
<div className="items-center">
<button
className="px-4 py-2 float-right"
onClick={() => handleClick(data.id)}
>
x
</button>
</div>
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
);
}
답변 3
0
안녕하세요 !
보니깐 모듈을 설치 안하셨는데요 ?!
npm install react-beautiful-dnd --save -f
를 이용해서 설치 후 이용해주세요 ~
감사합니다!
0
혹시 몰라 콘솔 창의 에러를 캡쳐가 아닌 문자열로 다시 올립니다.
react.development.js:1476 Uncaught 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useState (react.development.js:1507:1)
at useMemoOne (use-memo-one.esm.js:18:1)
at useInstanceCount (react-beautiful-dnd.esm.js:6953:1)
at DragDropContext (react-beautiful-dnd.esm.js:6963:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
react.development.js:1476 Uncaught 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useState (react.development.js:1507:1)
at useMemoOne (use-memo-one.esm.js:18:1)
at useInstanceCount (react-beautiful-dnd.esm.js:6953:1)
at DragDropContext (react-beautiful-dnd.esm.js:6963:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
react-dom.development.js:18687 The above error occurred in the <DragDropContext> component:
at DragDropContext (http://localhost:3000/static/js/bundle.js:9412:19)
at div
at List (http://localhost:3000/static/js/bundle.js:279:5)
at div
at div
at App (http://localhost:3000/static/js/bundle.js:35:82)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react.development.js:1476 Uncaught 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useState (react.development.js:1507:1)
at useMemoOne (use-memo-one.esm.js:18:1)
at useInstanceCount (react-beautiful-dnd.esm.js:6953:1)
at DragDropContext (react-beautiful-dnd.esm.js:6963:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
DragDropContext 의 문제인것 같기도 보이는데 잘 모르겠네요 ㅜㅜ
강의 소스 코드 압축 풀기 오류
0
92
1
런타임 에러 ㅠㅠ
0
105
1
강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ
0
115
1
안녕하세요 개발과 상관없는 질문입니다만
0
123
1
리액트 라우터 관련
0
119
1
react-beatiful-dnd에서 문제가 발생합니다.
0
108
1
react19에서는 react-beautiful-dnd가 설치되지 않습니다.
0
833
1
useEffect로 사용을 해도 되나요?
0
210
1
넷플릭스 오리지널 제외하고 슬라이드가 동작을 안합니다.
0
202
1
react 19의 useActionState가 더이상 isPending은 지원하지 않는 듯합니다
0
288
2
리액트 dockderfile 작성 시 COPY 질문
0
156
1
next.js에서부터는 react query 필요없는지
0
328
1
기능
0
204
1
오류가 안보여요
0
206
1
CSS
0
225
1
local storage
0
224
1
list컴포넌트 생성하기
0
230
1
검색어 입력 후 초기화하는 방법 궁금합니다!
0
343
1
Banner.css에 대해서
0
464
1
플러그인이 추천을 안해줍니다
0
335
1
마이너스버튼 테스트
0
285
2
리액트 서버 실행 오류
0
1170
2
오류메세지는 확인했는데 어떻게 고쳐야 할지 모르겠습니다 ㅠ
0
307
1
creactStore질문이요
1
293
2