使用 React 传递数据
在“CameraPage.tsx”下面的代码中，做了一个逻辑，其功能是搜索摄像头图像，很简单，只是发出一个 GET 请求，搜索后端注册的图像，稍后会介绍前端显示，操作正确。
当用户单击“InfoOutlineIcon”时，应加载另一个页面，显示图像，但是单击它时，会打开另一个页面，但不显示图像。出现的问题是，当您单击时，console.log 显示图像已加载，但是当打开新页面时，好像一切都从头开始，并且没有发出任何请求，因此没有图像加载/显示在前端。
// 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;
“CameraForm.tsx”下面的代码是应显示图像的位置，使用 routerAfterClickInfoCamera.push('CameraForm') 您将被带到该页面，但是，没有显示任何内容，如下所示之前说过。但我不明白该怎么做，我一直在研究但我不明白，如果有人可以帮助我，我很感激。
// 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;