React를 사용하여 데이터 전달

Question

아래 "CameraPage.tsx" 코드에는 카메라 이미지를 검색하는 로직이 만들어져 있는데, 프론트엔드 디스플레이에 등록된 이미지를 검색하기 위해 GET 요청을 보내는 것 뿐입니다. 나중에 소개할 예정이며, 동작은 정확합니다.

사용자가 "InfoOutlineIcon"을 클릭하면 이미지를 표시하는 다른 페이지가 로드되어야 하지만, 클릭하면 다른 페이지가 열리지만 이미지가 표시되지 않습니다. 발생하는 문제는 클릭하면 console.log에 이미지가 로드된 것으로 표시되지만 새 페이지가 열리면 모든 것이 처음부터 시작되는 것처럼 보이고 요청이 이루어지지 않아 이미지가 로드/표시되지 않는다는 것입니다. 프론트엔드.

으아악

"CameraForm.tsx" 아래 코드는 이미지가 표시되어야 하는 위치입니다. routerAfterClickInfoCamera.push('CameraForm')를 사용하면 해당 페이지로 이동하지만 아래와 같이 아무것도 표시되지 않습니다. 하지만 어떻게 해야 할지 모르겠어요. 연구해 봤지만 이해가 안 돼요. 누구든지 저를 도와주실 수 있다면 감사하겠습니다.

// CameraPage.tsx FILE CODE
function CameraPage() {
  const fetchCameraImage = async (cameraId: number, currentPageImages: number): Promise<boolean> => {
    if (!accessToken) {
      console.log("Access token not found");
      return false;
    }

    try {
      console.log("Calling responseFetchCameraImage");
      let responseFetchCameraImage;
      const page = currentPageImages > 0 ? currentPageImages : 1;
      const size = 20;

      responseFetchCameraImage = await axios.get(`${API_URL}/api/v1/imagens/pagination/${cameraId}?page=${page}&size=${size}`, {
        headers: {
          Authorization: `Bearer ${accessToken}`
        },
      });

      console.log(responseFetchCameraImage)
      if (responseFetchCameraImage.status === 200) {
        const images = responseFetchCameraImage.data.items;
        const cameraImages = images.filter((image: any) => image.camera_id === cameraId);
        console.log(cameraImages)

        if (cameraImages && cameraImages.length > 0) {
          const uniqueImagesData: ImageData[] = [];
          cameraImages.forEach((image: any) => {
            const imageData: ImageData = {
              imageURL: `data:image/jpg;base64,${image.image}`,
              data: image.data,
              placa: image.placa,
              score: image.score,
            };
            uniqueImagesData.push(imageData);
          });

          setImageData(uniqueImagesData);

          console.log("Images found");
          return true;
        } else {
          console.error("This camera has no images yet");
          return false;
        }
      } else {
        console.error("Error while trying to fetch camera images");
        return false;
      }
    } catch (error) {
      console.error("Error while trying to fetch camera images");
      errorTimeout = setTimeout(() => {
        setError("");
      }, 3000);
      return false;
    }
  };

  useEffect(() => {
    const fetchData = async () => {
      if (editingCameraId !== null) {
        const success = await fetchCameraImage(editingCameraId, currentPageImages);

        if (success) {
          setCurrentPageImages(1);
          setImageCounter(0);
        }
      }
    };

    fetchData();
  }, [editingCameraId, currentPageImages]);

  return (
    <Layout>
      <Flex justifyContent='center' alignItems='center'>
        <IconButton
          aria-label="View images"
          size="sm">
            <InfoOutlineIcon
              onClick={async () => {
              const hasImage = await fetchCameraImage(camera.id, currentPageImages);
              if (hasImage) {
              routerAfterClickInfoCamera.push('CameraImages')
              }
            }}
          />
        </IconButton>
      {camera.name}
    </Flex>
</Layout>
  );
}

export default CameraPage;

Answer 1

제 생각에는 "CameraImages" 컴포넌트를 호출하지만 props를 보내지 않는 것이 문제인 것 같습니다. 그렇기 때문에 이미지가 표시되지 않습니다.

이렇게 해야 합니다.

으아아아