Objects are not valid as a React child 에러 처리

Redux를 사용하다가 해당 에러가 발생해서 해결방안을 기록합니다!

 

📌에러 발생 원인

• 데이터를 화면에 표시할 때, 컴포넌트로 전달된 데이터 타입과 표시하려는 데이터 타입이 일치하지 않을 때

 

 

📌오류 찾는 방법

The above error occurred in the <span> component:

• 라는 오류를 더 찾아볼 수 있습니다. 바로 <span>에서 데이터 타입이 일치하지 않는다는 의미인 것 같습니다.
• 저는 span에 표시한 데이터를 console.log로 확인해서 어떤 타입이 들어가 있는지 확인했습니다.

 

 

📌오류 해결 방법

• console.log로 확인해본 결과 아래와 같은 배열이 나왔습니다.

{type: 'login/changeNick', payload: ''}

• redux를 활용해서 state의 값을 변경하는데 어떤 인자를 받아서 변경할 땐 반드시 payload를 사용해야 하는 것을 까먹은 것입니다.

let login = createSlice({
  name: 'login',
  initialState: { nickname: ''},

  reducers: {
    changeNick(state, nick) {
      //state.nickname = nick; 이렇게 해서 오류가 발생했습니다.
      state.nickname = nick.payload;  //<---- 해결 성공!
    }
  }
});

 

 

📌느낀 점

오류를 처음 접했을 때 해결 방법을 전혀 찾지 못하고 있어서 막막했는데 다시 천천히 살펴보니 해결할 수 있었습니다.

이번에도 또 느꼈습니다. 오류가 발생했을 땐 시간이 오래걸려도 반드시 해결된다는 걸...