React路由跳转后图片不显示问题求助（附代码）

在CameraPage.tsx中已实现通过GET请求从后端获取摄像头图片的逻辑，功能运行正常。但用户点击InfoOutlineIcon跳转到CameraImages页面（对应CameraForm.tsx）时，控制台显示图片已加载，新页面却无法展示。经排查，跳转后新页面重新初始化，既未获取到之前加载的图片数据，也未重新发起请求，导致前端无图片显示。

解决方案 #

方案1：路由跳转时传递已加载数据 #

利用路由的state参数，在跳转时把已获取的图片数据传递给目标页面，避免重复发起请求。

方案2：目标页面独立发起请求 #

在CameraImages页面中，通过路由参数获取摄像头ID，重新发起请求获取图片数据，保证页面数据的独立性和新鲜度。

修改后的代码示例 #

方案1：路由传参实现 #

CameraPage.tsx 跳转逻辑修改

<InfoOutlineIcon
  onClick={async () => {
    const hasImage = await fetchCameraImage(camera.id, currentPageImages);
    if (hasImage) {
      // 跳转时携带图片数据、当前页码和摄像头ID
      routerAfterClickInfoCamera.push({
        pathname: 'CameraImages',
        state: {
          imageData: imageData,
          currentPageImages: currentPageImages,
          cameraId: camera.id
        }
      });
    }
  }}
/>

CameraForm.tsx 接收路由参数

import { useLocation } from 'react-router-dom';

const CameraImages: React.FC = () => {
  const location = useLocation();
  // 从路由state中获取数据，设置默认值避免空值报错
  const imageData = location.state?.imageData || [];
  const currentPageImages = location.state?.currentPageImages || 1;
  const imagesPerPage = 20;

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

  // 原有过滤、分页逻辑保持不变...
  
  return (
    // 原有JSX结构保持不变...
  )
}

方案2：目标页面重新请求实现 #

CameraPage.tsx 跳转逻辑修改

<InfoOutlineIcon
  onClick={async () => {
    const hasImage = await fetchCameraImage(camera.id, currentPageImages);
    if (hasImage) {
      // 跳转时携带摄像头ID到路由参数
      routerAfterClickInfoCamera.push(`CameraImages/${camera.id}`);
    }
  }}
/>

CameraForm.tsx 新增请求逻辑

import { useParams } from 'react-router-dom';
import axios from 'axios';
import { useState, useEffect } from 'react';

export interface ImageData {
  imageURL: string;
  data: string;
  placa: string;
  score: number;
}

const CameraImages: React.FC = () => {
  const { cameraId } = useParams<{ cameraId: string }>();
  const [imageData, setImageData] = useState<ImageData[]>([]);
  const [currentPageImages, setCurrentPageImages] = useState(1);
  const imagesPerPage = 20;
  const [searchPlaca, setSearchPlaca] = useState("");
  const accessToken = localStorage.getItem('accessToken'); // 根据实际存储方式获取token
  const API_URL = process.env.REACT_APP_API_URL; // 替换为你的API地址

  // 新增图片请求函数
  const fetchCameraImage = async (cameraId: number, page: number): Promise<boolean> => {
    if (!accessToken) {
      console.log("Access token not found");
      return false;
    }

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

      if (response.status === 200) {
        const images = response.data.items;
        const cameraImages = images.filter((image: any) => image.camera_id === cameraId);
        
        if (cameraImages.length > 0) {
          const formattedImages: ImageData[] = cameraImages.map((image: any) => ({
            imageURL: `data:image/jpg;base64,${image.image}`,
            data: image.data,
            placa: image.placa,
            score: image.score,
          }));
          setImageData(formattedImages);
          return true;
        } else {
          console.error("该摄像头暂无图片");
          return false;
        }
      } else {
        console.error("获取图片失败");
        return false;
      }
    } catch (error) {
      console.error("请求图片时出错", error);
      return false;
    }
  };

  // 页面加载时发起请求
  useEffect(() => {
    if (cameraId) {
      fetchCameraImage(parseInt(cameraId), currentPageImages);
    }
  }, [cameraId, currentPageImages]);

  // 原有过滤、分页逻辑保持不变...
  
  return (
    // 原有JSX结构保持不变...
  )
}

内容的提问来源于stack exchange，提问作者alanfljesus