Transmission de données à l'aide de React

Question

Dans le code ci-dessous "CameraPage.tsx", une logique est créée. Sa fonction est de rechercher des images de caméra. Il envoie simplement une requête GET pour rechercher des images enregistrées dans le backend. sera introduit plus tard, et l'opération est correcte.

Lorsque l'utilisateur clique sur "InfoOutlineIcon", une autre page devrait se charger en affichant l'image, mais en cliquant dessus, une autre page s'ouvre mais n'affiche pas l'image. Le problème qui se pose est que lorsque vous cliquez, le console.log montre que l'image est chargée, mais lorsqu'une nouvelle page est ouverte, il semble que tout repart de zéro et qu'aucune requête n'est faite, donc aucune image n'est chargée/affichée sur le front-end.

// 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;

Le code ci-dessous "CameraForm.tsx" est l'endroit où l'image doit être affichée, en utilisant routerAfterClickInfoCamera.push('CameraForm') vous serez redirigé vers cette page, cependant, rien n'est affiché comme indiqué ci-dessous. Mais je ne comprends pas comment faire, j'ai fait des recherches mais je ne comprends pas, si quelqu'un peut m'aider, je lui serais reconnaissant.

// CameraForm.tsx FILE CODE
export interface ImageData {
  imageURL: string;
  data: string;
  placa: string;
  score: number;
}

interface CameraModalProps {
  imageData?: ImageData[];
  currentPageImages: number;
  imagesPerPage: number;
}

const CameraImages: React.FC<CameraModalProps> = ({
  imageData = [],
  currentPageImages,
  imagesPerPage,
}) => {

  const [searchPlaca, setSearchPlaca] = useState("");

  const startIndex = (currentPageImages - 1) * imagesPerPage;

  const endIndex = startIndex + imagesPerPage;

  // Filter images by placa
  const filterImagesByPlaca = () => {
    if (searchPlaca === "") {
      return imageData;
    }

    return imageData.filter((image) =>
      image.placa.toLowerCase().includes(searchPlaca.toLowerCase())
    );
  };

  // Get images filtered by placa
  const filteredImages = filterImagesByPlaca();

  const visibleImages = filteredImages.slice(startIndex, endIndex) ?? [];

  return (
    <Layout>
      <Head title={"Câmeras"} />
      <Flex justifyContent="space-between">
        <Title title="IMAGEM" />
      </Flex>

      <Box>
        <Input
          type="text"
          border="none"
          style={{
            marginLeft: "1rem",
            outline: "none",
            backgroundColor: "transparent",
            borderBottom: "1px solid #ccc",
          }}
          width="auto"
          placeholder="Buscar placa"
          value={searchPlaca}
          onChange={(e) => setSearchPlaca(e.target.value)}
        />
      </Box>
      <Box>
        {visibleImages.map((imageData, index) => {
          const { imageURL, data, placa, score } = imageData;
          const imageNumber = startIndex + index + 1;
          return (
            <Box key={index} borderBottom="1px solid #ccc" py={2}>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Imagem {imageNumber}
              </Text>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Data: {data}
              </Text>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Placa: {placa}
              </Text>
              <Text fontSize={["sm", "md"]} fontWeight="normal">
                Score: {score}
              </Text>
              <ChakraImage src={imageURL} alt={`Image ${index}`} />
            </Box>
          );
        })}
      </Box>
    </Layout>
  )
}

export default CameraImages;

Answer 1

Je pense que le problème est que vous appelez le composant "CameraImages" mais que vous n'envoyez pas les accessoires. C'est pourquoi l'image ne s'affiche pas.

Tu devrais faire quelque chose comme ça.

<CameraImages imageData={imageData} currentPageImages={currentPageImages} imagesPerPage={imagesPerPage} />