React/과제 테스트

[체크리스트] 문제점 2. delete 작동시 데이터 업데이트가 되지 않는 문제

Judith Hopps 2023. 11. 28. 18:10
반응형

문제점

delete 작동시 데이터 업데이트가 되지 않는 문제가 발생했다.

현재 계획한 기능은 다음과 같다.

Minus 버튼을 클릭할 시 updatedSelectData가 변경된다.
Done 버튼을 클릭하면 updateSelectedData가 ChecklistData에 반영된다.


But... 아래처럼.. updatedSelectedData가 ChecklistData에 반영이 제대로 되지 않는다..



Why... 이런일이.....🤣
투장부릴 시간 없다. 천천히 코드를 살펴보자.


원인


isEditing의 상태 변화로 인해 updatedData가 변경되고 있다. 

 

const handleDelete = () => {
      if (updatedSelectedData) {
        const updatedData = [
          ...checklistData.filter(v => v.weekNumber !== selectedWeek),
          ...updatedSelectedData,
        ];

        setChecklistData(updatedData);
        console.log('gogo');
        console.log('Update', updatedSelectedData);
      }
    };



console.log('Update', updatedSelectedData);

 

handleDelete 실행 결과 후 updatedSelectedData는 다음과 같다. 

Update [{"completed": true, "content": "Buy healthy snacks to catch up your increased appetite.", "weekNumber": 15}, {"completed": false, "content": "Talk to your doctor about morning sickness if the symptom is severe. ", "weekNumber": 15}]

 

그러나 handleDelete 실행 결과 전 updatedSelectedData는 아래와 같다. 

Update [{"completed": false, "content": "Talk to your doctor about morning sickness if the symptom is severe. ", "weekNumber": 15}]

 

 

해결과정

 

1. updatedSelectedData가 변경되는 부분 찾기

const toggleDelete = (index: number) => {
const modifiedData = updatedSelectedData.filter((_, i) => i !== index);

setUpdatedSelectedData(modifiedData);
};

 

Minus Icon 클릭 시 updatedSelectedData를 변경한다.

그러면 updatedSelectedData를 클릭한다.

 

2. handleDelete 함수 실행 살펴보기

const handleDelete = () => {
setChecklistData(prevData => [
...prevData.filter(v => v.weekNumber !== selectedWeek),
...updatedSelectedData,
]);
setChecklistData(updatedData);
console.log('gogo');
console.log('Update', updatedSelectedData);
};

 

이 handleDelete 함수를 형제 컴포넌트에서 실행을 하고 있다. 

 

3. toggleDelete함수 실행 시 checklistData가 변경되지 않고 있다. 

setChecklistData를 추가했다

const toggleDelete = (index: number) => {
const modifiedData = updatedSelectedData.filter((_, i) => i !== index);
setUpdatedSelectedData(modifiedData);
setChecklistData(prevData => [
...prevData.filter(v => v.weekNumber !== selectedWeek),
...modifiedData,
]);
};

 

 

실행 후 화면!

반응형