발생한 문제
react, recoil 사용해서 개인 프로젝트 진행 중 recoil state를 직접 변경하려다가 다음과 같은 에러가 발생했다.
TypeError: Cannot assign to read only property 'isFaved' of object '#<Object>'
상황
api로 받아온 정보를 recoil에 저장해둔 상태에서, 유저의 액션에 따라 해당 정보를 직접 업데이트하려고 했다.
영화를 클릭하면 즐겨찾기에 저장할 수 있도록 영화 객체 정보에서 isFaved 키에 해당하는 boolean값을 변경하는 로직이다.
원인
에러메시지에서도 볼 수 있듯이 read only 값을 업데이트하려고 해서 문제가 발생한 것, 즉 불변성을 지키지 못해서 발생한 에러이다.
새로운 객체를 만들어서 넘겨주면 해결된다.
해결
모달에서 분홍색 버튼을 클릭하면 아래 첫 번째와 같은 함수를 실행하도록 했었는데, 아래 두 번째와 같이 바꿔서 에러를 해결했다.
// 변경 전 코드
setSearchedMovies((prev) =>
prev.map((movie) => {
if (movie.imdbID === imdbID) movie.isFaved = false;
return movie;
})
);// 변경 후 코드
setSearchedMovies((prev) =>
prev.map((movie) =>
movie.imdbID === imdbID ? { ...movie, isFaved: false } : movie
)
);