수정된 정보만 submit 하는 방법

[kmsgm]

수정된 정보만 PATCH하기 위해서 originStudent와 editedStudent를 비교해서 값이 바뀐 부분만 form에 넣어주려고 하는데
계속 빈 객체가 출력되고 있습니다.

이렇게 스프레드를 사용하면 안되는 걸까요?

const [originStudent, setOriginStudent] = useState(initialState);
const [editedStudent, setEditedStudent] = useState(initialState);
const [form, setForm] = useState({});

const onSubmitEdit = () => {  // 수정된 정보를 submit 하는 함수
    if (originStudent.profile_img !== editedStudent.profile_img) {
      setForm({ ...form, profile_img: editedStudent.profile_img });
    }
    if (originStudent.email !== editedStudent.email) {
      setForm({ ...form, email: editedStudent.email });
    }
    if (originStudent.phone !== editedStudent.phone) {
      setForm({ ...form, phone: editedStudent.phone });
    }
    if (originStudent.major !== editedStudent.major) {
      setForm({ ...form, major: editedStudent.major });
    }
    console.log(form);  // { } 빈 객체 출력

    axios.patch(`v1/student/${id}`, form);
}

[woohm402]

렌더 과정과 스코프에 대해 잘못 이해하고 계신 부분이 있는 것 같습니다. 질문 #562 에 대한 제 답변 한번 확인해보시기 바랍니다.

아무튼 해결방법으로는 setForm을 이용해 폼을 수정하고 그걸 이용해서 제출하는 방식은 불가능하고, onSubmitEdit 함수 안에서 리퀘스트용 객체 (가령 const body = {} 같은 식)를 새로 만들어서 처리하는 방식으로 구현하는 게 일반적입니다.

@kmsgm 님의 경우라면 form 을 state로 만들 필요가 없습니다. 잘 생각해 보면 "제출할 값"은 상태가 아니라 액션을 처리하기 위해 중간에 만들어야 하는 하나의 값으로 보는 게 맞습니다. 따라서 form을 state로 만들지 말고, onSubmitEdit 안에서 그냥 선언하고, 만들고, PATCH 쏘고 나서 버려지는 변수로 두는 게 옳을 것 같네요!

[kmsgm]

넵넵 해결했습니다ㅎㅎ 감사합니다!!