수파베이스에서 테이블 비교 해서 이미지 출력-3

기존

1. 사용자가 입력한 데이터에 따라 테이블에 데이터 추가

2. 입력하는 테이블과 이미지가 출력 되는 테이블 join 해서 이미지가 출력 되는 테이블에서 이미지 출력

 

수정

1. 사용자가 입력한 데이터에 따라 테이블에 데이터 추가

2. 입력 하는 테이블과  이미지 출력 되는 테이블 따로 관리 join안함

3. 입력하는 테이블 값에 따라 이미지가 등록 되록 수정

 

기존 코드

const hadletest = async () => {
    const { data, error } = await supabase.from("writedb").select(`
        a,
        listeat (
            url
        )
    `);

    if (data) {
      const urls: UrlsType = data.map((item) => item.listeat);
      const urlArr = Object.values(urls[0]);
      const url = urlArr[0];
      setImgE(url.toString());
      setImgList((prevList) => [...prevList, url.toString()]);
    } else {
      console.log(error);
    }
  };

 

수정된 코드 1차

기존 코드 아예 삭제

 

이미지 담은 테이블 

 const hadleListImg = async () => {
    const { data, error } = await supabase.from("listimgdb").select();

    if (data) {
      setAllimgList(data);
    } else {
      console.log(error);
    }
  };

 

데이터 입력 되는 테이블

 const handleSubmit222 = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // if (!txtValue) {
    //   window.confirm("내용을 작성 해주세요");
    //   return;
    // }

   
    try {
      console.log(allimgList);

      const { error } = await supabase.from("test").insert({
        id: strId,
        uuid: userUid,
        a: btnTopSelect,
        aimg: btnTopSelect === "" ? null : allimgList[0].a,
        content: txtValue,
      });
      setTextValue("");
    } catch (error) {
      console.log(error);
    }
  };

 

사용자가 입력한 데이터가 있는 조건에 따라 값을 추가 하는 형식으로 수정

 

수정 코드 2차

문제 사항

1. 테이블의 첫번째 키 값이 들어 가지 않으면 다른 값들은 안들어감

2. 순서대로 선택을 해야 값이 들어가고 순서 상관없이 선택하면 값 안들어감

 

 const a = btnBtSelects.find((item) => item === "1") || null;
 const b = btnBtSelects.find((item) => item === "2") || null;
 const c = btnBtSelects.find((item) => item === "3") || null;
 const d = btnBtSelects.find((item) => item === "4") || null;
 
  try {
      console.log(allimgList);

      const { error } = await supabase.from("test").insert({
        id: strId,
        uuid: userUid,
        a: a,
      });
      setTextValue("");
    } catch (error) {
      console.log(error);
    }

변수 a-d 까지 줄 추가

btnBtSelcts 배열에서 찾아라(find) item의 값이 1과 동일 하면 값을 반환 아니면 null

 

 

정상 적으로 테이블 순서 상관없이 값 등록 됨!