Spring+React交互问题：map函数报错与端口访问异常

问题1：React组件无法渲染Spring接口数据，报错this.state.events.map is not a function #

排查与解决步骤： #

1. 确认后端接口返回格式
   打开浏览器控制台的「Network」标签，找到/events/ongoingEvents的请求，查看响应内容：

   • 如果返回单个对象（而非数组）：比如{id:1, name:"xxx"}，直接赋值会让events变成对象，无法调用map。此时需将其转为数组：[responseData]。
   • 如果返回嵌套结构：比如{code:200, data:[...]}，则要提取数组部分，比如responseData.data。
   • 如果返回null/undefined：保持events为空数组即可。

2. 修正React请求处理逻辑
   以fetch为例，修改状态更新代码，加入类型判断：

   fetch('/events/ongoingEvents')
     .then(res => res.json())
     .then(data => {
       // 确保最终赋值的是数组
       const validEvents = Array.isArray(data) 
         ? data 
         : (data?.events || []); // 适配嵌套数组或单个对象的情况
       this.setState({ events: validEvents });
     })
     .catch(err => console.error('请求失败:', err));
   

3. 渲染时增加容错判断
   在组件渲染部分，先校验events是否为数组，避免报错：

   render() {
     const { events } = this.state;
     return (
       <div>
         {Array.isArray(events) ? (
           events.map(event => (
             <div key={event.id}>{event.name}</div>
           ))
         ) : (
           <p>暂无数据</p>
         )}
       </div>
     );
   }
   

问题2：配置proxy后仍无法通过localhost:8080访问React页面 #

核心说明： #

package.json中的proxy仅用于React开发环境下转发API请求，不会让Spring Boot直接托管React页面。要实现从localhost:8080访问React页面，分两种场景处理：

场景1：生产环境（正式部署）

1. 打包React项目：在React项目根目录执行npm run build，生成build文件夹。
2. 托管静态资源：将build文件夹内的所有文件复制到Spring Boot项目的src/main/resources/static目录下。
3. 启动Spring Boot：访问localhost:8080即可直接打开React页面，API请求无需跨域（直接走8080端口）。

场景2：开发环境（实时调试）

如果需要在开发时通过8080访问React（避免跨域+统一端口），可以通过Spring路由转发实现：

1. 在Spring Boot中添加路由转发Controller：

   @Controller
   public class ReactForwardController {
       // 匹配所有非API的请求，转发到React开发服务器
       @GetMapping(value = {"/", "/events/**"})
       public String forwardToReact() {
           return "forward:http://localhost:3000";
       }
   }
   

2. 修改React开发服务器配置：在package.json的start脚本中添加--host 0.0.0.0，允许外部访问：

   "scripts": {
     "start": "react-scripts start --host 0.0.0.0",
     "build": "react-scripts build",
     ...
   }
   

3. 启动Spring Boot和React开发服务器：访问localhost:8080即可访问React页面，API请求会通过Spring转发或React的proxy处理。

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