오류. 프로필 수정페이지에서 스택, 관심사 검색부분 변경없이 작성 했을 경우 작성완료 후 프로필 화면에 데이터가 보이지 않음
오류가 난 이유
스택, 관심사 변경없이 작성했을 경우 서버에 formdata로 담아서 보낼 값이 stackTag, hobbyTag여야 하는데 변경했을때 리덕스에 저장되는 값을 가져온 stack, hobby가 보내져서 아무 변경 없이 작성했을 경우 빈값으로 서버에 보내져서 데이터가 보이지 않았다.
해결방안
// 서버에서 보내준 태그 값
const stackTag = userInfo.hashTagsString
?.split('_')[0]
?.split('@')
.slice(1, 2);
const hobbyTag = userInfo.hashTagsString
?.split('_')[1]
?.split('@')
.slice(1, 4);
// 리덕스에 저장된 태그 값
const stack = useSelector((state) => state.cards.stack);
const hobby = useSelector((state) => state.cards.hobby);
...생략...
const formData = new FormData();
formData.append('userName', userName);
if (stack.length !== 0 && hobby.length !== 0) {
formData.append('hashTagsStr', stack + ',' + hobby);
} else if (stack.length === 0 && hobby.length !== 0) {
formData.append('hashTagsStr', stackTag + ',' + hobby);
} else if (stack.length !== 0 && hobby.length === 0) {
formData.append('hashTagsStr', stack + ',' + hobbyTag);
} else {
formData.append('hashTagsStr', stackTag + ',' + hobbyTag);
}
formData.append('field', category);
if (fileData) {
formData.append('profile', fileData);
}
console.log('formData', formData);
dispatch(editCardProfileDB(formData));
localStorage.removeItem('nick');
localStorage.removeItem('category');
};
formData에 넣어서 스택과 관심사를 보낼때 stack.length와 hobby.length로 구분해서 조건문을 만들었다. 그래서 length가 0일 경우는 태그 변화가 없는 거기 때문에 원래 값인 서버에서 보내준 태그 값 stackTag, hobbyTag를 formData에 담아서 보냈다. length가 0이 아닐 경우 태그 값에 변화가 있기 때문에 변화된 값은 바로 리덕스에 저장되어 있어 리덕스에 저장된 값 stack과 hobby를 formData에 담아서 보냈다.