-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
hooks 에러?? 문제 질문드립니다.
22.08.03 22:44 작성 조회수 554
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>
);
}
답변을 작성해보세요.
0
0
John Ahn
지식공유자2022.08.04
안녕하세요 !
보니깐 모듈을 설치 안하셨는데요 ?!
npm install react-beautiful-dnd --save -f
를 이용해서 설치 후 이용해주세요 ~
감사합니다!
0
SY J
질문자2022.08.03
혹시 몰라 콘솔 창의 에러를 캡쳐가 아닌 문자열로 다시 올립니다.
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 의 문제인것 같기도 보이는데 잘 모르겠네요 ㅜㅜ
답변 3