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

문제점

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,

]);

};

 

 

실행 후 화면!