Transmission de données à l'aide de React
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;