[error] object list 만들기

object list 생성

Tabulator에 들어갈 data는 다음과 같은데

  {//tabulator data
    id: 1,
    type: "none",
    start_time: "2022/09/27 13:30",
    end_time: "2022/09/27 13:34",
    url: "https://www.youtube.com/watch?v=VP5qPgZHqAs",
    cctv_id: "std130",
    position: "(37.3595704,127.105399)",
    address: "서울 광진구 능동로 209 세종대학교",
  },

백에서 보내줄 json의 data와 차이가 있어 가공이 필요하다.

	{//json data
      "id": 1,
      "type": "폭행",
      "start_time": "2022/09/30 03:38",
      "end_time": "2022/09/30 03:40",
      "url": "https://www.youtube.com/watch?v=VP5qPgZHqAs",
      "cctv": {
        "id": "c32",
        "position": { "x": 35.23, "y": 123.14 },
        "address": "서울시 송파구"
      }
    }

일단 useState를 사용하는 object 타입의 list를 만들어 그를 배열 타입의 listGroup에 푸쉬할 생각이었다.그런데 배열에 변화가 생겨도 리렌더링이 되지 않고 map함수 내에서 setList 후 listGroup에 푸쉬를 하니 json data의 첫 번째 항목만 입력이 되고 나머지는 적용되지 않았다.

RecordService.viewAllRecord()//코드를 지워버려 기억을 토대로 다시 작성
      .then((response) => {
        console.log(response);
        // setData(response.data);
        response.data.map((obj) =>
          listGroup.push(
          setList(
            id: obj.id,
            type: obj.type,
            start_time: obj.start_time,
            end_time: obj.end_time,
            url: obj.url,
            cctv_id: obj.cctv.id,
            position:
              "( " + obj.cctv.position.x + ", " + obj.cctv.position.y + " )",
            address: obj.cctv.address,
         	 ),
       	 listGroup.push(list)
        );
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

외부 함수로도 만들어보고 여러 가지 시도를 해보았으나 실패했다. 그래서 코드를 최대한 간단하게 다시 짜보기로 했다.

	response.data.map((obj) =>
          listGroup.push({
            id: obj.id,
            type: obj.type,
            start_time: obj.start_time,
            end_time: obj.end_time,
            url: obj.url,
            cctv_id: obj.cctv.id,
            position:
              "( " + obj.cctv.position.x + ", " + obj.cctv.position.y + " )",
            address: obj.cctv.address,
          })
        );

listGroup 자체에 object를 바로 넣어 object 배열을 만드는 데 성공했다.

type 차이 발생

그러나 Tabulator가 렌더링 되지 않았다. 배열의 타입 검사에서 차이가 발생해서였다.

listGroup이 메모리가 할당되지 않은 상태에서 push를 해서 차이가 생긴거라 '추측'하고 있다. listGroup을 다른 배열에 setState 시킴으로써 문제가 해결했다.

 setList(listGroup);