SyntaxError: Unexpected token e in JSON at position 0

에러 상황

게시물 내용을 수정하는 patch 요청을 날렸는데, 계속 리듀서 슬라이스까지 가지 못하고 thunk 부분에서 에러가 났다.

 

SyntaxError: Unexpected token e in JSON at position 0

 

작성했던 코드

export const __updateLetter = createAsyncThunk("updateLetter", async (payload, thunkAPI) => {
  try {
    const response = await axios.patch(`${process.env.REACT_APP_JSON_SERVER_URL}/letters/${payload.id}`, payload.content);
    return thunkAPI.fulfillWithValue(response.data);
  } catch (error) {
    alert(error.response.data.message);
    return thunkAPI.rejectWithValue(error);
  }
});

 

분명 리덕스 슬라이스까지 도달하지 못하고 catch로 빠지기 때문에 여기에서 에러가 있을 거라고 생각했다.

해결 방법

patch 요청을 보낼 때는 수정할 내용에 대해서 객체 형태로 보내야 하는데 나는 문자열 형태로 보내서 에러가 발생하였다. 

patch의 두 번째 인자 부분을 payload.content 에서 { content: payload.content }로 변경하여 해결하였다. 

 

export const __updateLetter = createAsyncThunk("updateLetter", async (payload, thunkAPI) => {
  try {
    const response = await axios.patch(`${process.env.REACT_APP_JSON_SERVER_URL}/letters/${payload.id}`, { content: payload.content });
    return thunkAPI.fulfillWithValue(response.data);
  } catch (error) {
    alert(error.response.data.message);
    return thunkAPI.rejectWithValue(error);
  }
});

 

느낀 점

수정할 데이터를 보냈으니 저 부분은 문제가 없을 것이라고 생각하고 다른 부분에서 계속 원인을 찾아다녔다...

아직 데이터를 요청해서 받고 하는 부분이 익숙하지 않아서 더 그런 것 같다. 

많이 사용해서 익숙해져야겠다.