1. 문제 현상

---

• 상태관리 툴을 기존 context API에서 redux toolkit으로 바꾸는 중 useAppSelector로 스토어에서 가져온 값인 마이 페이지의 기존 나의 닉네임을 수정해야 하는데 수정 버튼을 클릭 시 아래와 같은 에러가 발생했다.

2. 문제 원인

---

• 읽기 전용인 고정된 객체를 수정을 시도하려고 하니 에러가 발생했다.

// 기존 유저 닉네임 patch 요청 함수

const changeNickname = async () => {
  const newNickname = {
    userId: list.userId,
    nickname: nickname,
  };
  const res = await TOKEN_API.patch(`/users/${list.userId}`, newNickname);
  getUserData(res.data);
  currentUserInfo.nickname = nickname;
  localStorage.setItem("CURRENT_USER", JSON.stringify(currentUserInfo));
  setEditNickname(false);
};

3. 문제 해결

---

• 스프레드 연산자를 사용하여 값을 복사한 후 그 값을 수정하는 방식으로 수정하니 정상적으로 닉네임 수정이 가능했다.

// 스프레드 연산자로 값을 복사

const changeNickname = async () => {
  const newNickname = {
    userId: list.userId,
    nickname: nickname,
  };
  const res = await TOKEN_API.patch(`/users/${list.userId}`, newNickname);
  getUserData(res.data);
  const currentUserInfoCopy = { ...currentUserInfo };
  currentUserInfoCopy.nickname = nickname;
  localStorage.setItem("CURRENT_USER", JSON.stringify(currentUserInfoCopy));
  setEditNickname(false);
};

참고

• Cannot assign to read only property of Object In JavaScript