Cannot assign to read only property '0' of object '[object Array]' 해결하기

제목의 오류는 변경할 수 없는 배열 수정을 시도할 경우 발생하는 에러이다.

오류 발생 배경

버튼 클릭 시 기존의 카테고리를 useSetRecoilValue()를 통해 변경하고자 했다.

// 카테고리 변경 함수
    const handleChgCategory = (e : React.MouseEvent<HTMLButtonElement>) => {
        setToDos((prevToDoList) => {
            // 찾을 투두리스트 인덱스
            const toDoIndex = prevToDoList.findIndex((toDo) => toDo.id === id);

            // 과거 투두리스트
            const prevToDo = prevToDoList[toDoIndex];
            // 변경된 투두리스트
            const newToDo = {id : id, text : text, category : e.currentTarget.name as ToDoListItfc["category"]};

            return prevToDoList.splice(toDoIndex, 1, newToDo);
        }) 
    };

위 코드의 반환값을 확인해보니 제목의 오류가 발생하였다.

원인은 오류 문구 read only에 있었다.

읽기 전용 데이터를 수정하려 했기에 오류가 발생한 것이다.

깊은 복사

해결 방법은 깊은 복사이다.

변경 불가능한 데이터를 다른 변수에 복사해 변경 작업을 진행하면 된다.

스프레드 연산자를 사용 하면 깊은 복사가 가능하다고 한다.

// 카테고리 변경 함수
    const handleChgCategory = (e : React.MouseEvent<HTMLButtonElement>) => {
        setToDos((prevToDoList) => {
            // 찾을 투두리스트 인덱스
            const toDoIndex = prevToDoList.findIndex((toDo) => toDo.id === id);

            // 과거 투두리스트
            const prevToDo = prevToDoList[toDoIndex];
            // 변경된 투두리스트
            const newToDo = {id : id, text : text, category : e.currentTarget.name as ToDoListItfc["category"]};

            // 변경 내역 적용
            const updatedToDo = [...prevToDoList];
            updatedToDo.splice(toDoIndex, 1, newToDo);
            
            return updatedToDo;
        }) 
    };

카테고리가 정상적으로 변경된 것을 확인할 수 있다.

참고

read only 데이터 수정하기