ReactJS中requests.map()报is not a function错误的原因与解决办法

Array.prototype.map 是仅数组可调用的方法，触发TypeError: requests.map is not a function的原因有两个：

• 从你提供的控制台输出可见，/api/schedule/admin/requests 接口返回的是单个对象，不是对象数组，不具备map方法
• 你测试时写的setRequests(response.json())逻辑错误：response.json()返回的是Promise实例，并非解析后的响应数据，直接赋值后requests是Promise类型，自然无法调用map

1. 修正请求解析逻辑，同时兼容接口返回单个对象/数组的情况，和你allJobs的请求逻辑对齐：

// 替换你原来获取requests的useEffect
useEffect(() => {
  const requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };
  
  fetch("http://localhost/scheduleapp/api/schedule/admin/requests", requestOptions)
    .then(response => response.text())
    .then(result => {
      const parsedData = JSON.parse(result)
      // 统一处理为数组：如果是单个对象就包裹为数组，是数组直接使用
      setRequests(Array.isArray(parsedData) ? parsedData : [parsedData])
    })
    .catch(error => console.log('error', error));
}, [])

2. 渲染前增加类型校验，避免请求未完成时偶现报错：

// 替换你原来的requests.map渲染逻辑
{Array.isArray(requests) && requests.map(item => <Jobrequests id={item.id} key={item.id}/>)}

注：额外给Jobrequests组件加了key属性，符合React列表渲染的规范，避免控制台告警。

3. 可选优化：如果你的接口设计上应该返回请求列表，可同步调整后端接口逻辑，直接返回数组结构，无需前端做兼容处理。

内容的提问来源于stack exchange，提问作者OĞUZHAN ŞENOKUR