멈멈-토이프로젝트(React)1

데이터 수정 하기

순9 2024. 6. 4. 22:29
728x90

1. 리스트에서 선택 한 글 수정

2. 선택 된 페이지의 id를 비교 해서 데이터 수정하기

3. 사용자가 입력 했던 데이터의 상태에 따라 입력 되는 값 설정

 

기존 코드

  fetchDb.map(async (i) => {
        const { error } = await supabase
          .from("writedb")
          .update({
            walk: i.walk === null ? btnTopSelect : i.walk,
            walkimg: btnTopSelect === "" ? null : allimgList[0].walk,
          })
          .eq("id", selectDBId);
      });

fetchDb는 입력 된 기존 데이터에 map 사용해서 각 데이터 별로 데이터 비교

update 수정 할 데이터 

writedb 테이블에 id키의 열에 selectDBId(해당 페이지 id)를 가진 값을 수정 하는 조건

 

여기서 문제는 사용자가 x를 따로 수정 하지 않고 x를 유지 하고 싶은데

유지가 안됨

 

 

수정 코드

const handleImageClick = (item: string) => {
    if (selectDBId) {
      const confirmChange = window.confirm("산책 상태를 변경하시겠습니까?");
      if (!confirmChange) {
        // 사용자가 취소를 클릭한 경우, 아무것도 하지 않고 함수 종료
        return;
      }
      setUpdatedWalk("산책 완료");
      setUpdatedWalkImg(allimgList[0].walk);
      setUpdatedBasicW(imgList[1].imgurl);
    } else {
      setUpdatedWalk("산책 미완");
    }

    setBtnTopSelect([...btnTopSelect, item]);
  };

이 코드 사용자가 선택 한 값이 walk 에 적용 되는데 여기서 값을 수정 할지 유지 할지를 결정

 

  fetchDb.map(async (item) => {
        const { error } = await supabase
          .from("writedb")
          .update({
            walk: item.walk === "산책 미완" ? updatedWalk : item.walk,
            walkimg: item.walk === "산책 미완" ? updatedWalkImg : item.walkimg,
            basicW: item.walk === "산책 미완" ? updatedBasicW : item.basicW,
          })
          .eq("id", selectDBId);
      });

handleImageClick 클릭시 적용 되는 값들을 walk에 적용