React搜索栏加载404错误及功能失效问题求助

一、404错误原因与修复 #

错误根源 #

终端显示的GET /api/photos/photo/undefined 404，是因为：

1. 你定义的getPhoto函数需要接收photoId参数来拼接单张照片的请求URL，但在Gallery组件的componentDidMount中调用时，没有传递任何参数，导致URL中的photoId被替换为undefined。
2. 从Gallery页面的需求来看，你需要加载所有照片数据，但当前的getPhoto是用于获取单张照片的接口，不符合批量获取的需求。

修复步骤 #

1. 新增批量获取照片的API请求函数
   检查后端是否提供了获取所有照片的接口（通常是GET /api/photos），如果有，在photoService中新增对应函数：

   import http from "./httpService";
   
   // 原单张照片接口保留
   export const getPhoto = (photoId) => http.get(`http://localhost:8181/api/photos/${photoId}`);
   // 新增批量获取接口
   export const getPhotos = () => http.get("http://localhost:8181/api/photos");
   

2. 替换Gallery组件的数据请求
   在componentDidMount中调用新的批量获取接口：

   async componentDidMount() {
     try {
       const { data } = await getPhotos(); // 替换为批量获取接口
       this.setState({ data, isMount: true, photos: data });
     } catch (error) {
       console.log(error.message);
     }
   }
   

二、搜索栏失效原因与修复 #

错误根源 #

1. 当前Gallery组件渲染的是静态img标签，并非从state.photos数组中动态生成，所以即使handleChange过滤了数组，页面也不会更新。
2. 测试数据只有一张照片，若静态渲染未关联状态，搜索功能无法作用于页面元素。

修复步骤 #

1. 动态渲染照片列表
   修改Gallery组件的render方法，基于state.photos动态生成图片元素：

   render() {
     const { photos } = this.state;
     return (
       <div className="container">
         <PageHeader title="גלריה" subTitle="והנה כמה מהדברים שלנו" />
         <div>
           <Search handleChange={this.handleChange} />
         </div>
         <div>
           <div className="hoverPics">
             {photos.map(photo => (
               <a key={photo._id} href={`${photo.title.toLowerCase()}Details`}>
                 <img
                   className="gallery"
                   src={`/assets/images/${photo.alt}.png`} // 需与MongoDB中alt字段和本地图片文件名匹配
                   alt={photo.alt}
                   title={photo.title}
                   description={photo.description}
                   description2={photo.description2}
                   photoId={photo._id}
                 />
               </a>
             ))}
             {/* 数据加载前显示静态默认图片 */}
             {photos.length === 0 && (
               <a href="donatsDetails">
                 <img
                   className="gallery"
                   src="/assets/images/donats.png"
                   alt="donats"
                   title="סופגניות"
                   description="סופגניות עבור חנוכה בלבד"
                   description2="סופגניות עבור חנוכה בלבד"
                   photoId="6316242e8364d16b288cf017"
                 />
               </a>
             )}
           </div>
         </div>
       </div>
     );
   }
   

2. 确保数据字段匹配
   检查MongoDB的photos集合中，每条数据是否包含title、bizNumber、alt、_id等字段，这些是搜索过滤和动态渲染的必要依据。

额外注意事项 #

• 验证后端GET /api/photos接口是否正常返回200状态码及所有照片数据。
• 若前后端端口不同，需确保后端配置了CORS跨域支持，避免请求被拦截。
• 动态渲染时必须为每个元素添加唯一key（如photo._id），避免React渲染警告。

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