在“CameraPage.tsx”下面的代码中，做了一个逻辑，其功能是搜索摄像头图像，很简单，只是发出一个 GET 请求，搜索后端注册的图像，稍后会介绍前端显示，操作正确。
当用户单击“InfoOutlineIcon”时，应加载另一个页面，显示图像，但是单击它时，会打开另一个页面，但不显示图像。出现的问题是，当您单击时，console.log 显示图像已加载，但是当打开新页面时，好像一切都从头开始，并且没有发出任何请求，因此没有图像加载/显示在前端。
// CameraPage.tsx FILE CODE function CameraPage() { const fetchCameraImage = async (cameraId: number, currentPageImages: number): Promise => { 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 ( { const hasImage = await fetchCameraImage(camera.id, currentPageImages); if (hasImage) { routerAfterClickInfoCamera.push('CameraImages') } }} /> {camera.name} ); } 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 = ({ 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 ( setSearchPlaca(e.target.value)} /> {visibleImages.map((imageData, index) => { const { imageURL, data, placa, score } = imageData; const imageNumber = startIndex + index + 1; return ( Imagem {imageNumber} Data: {data} Placa: {placa} Score: {score} ); })} ) } export default CameraImages;
我认为问题是您正在调用“CameraImages”组件，但您没有发送道具。这就是图像不显示的原因。
你应该做这样的事情。