ReactJS调用原生PHP接口fetch获取的数据无法在前端UI展示求助

问题排查&修复方案 #

1. 补全fetch错误捕获与日志打印，确认拿到的数据结构正确
   你当前的fetch逻辑没有异常捕获，也没有打印返回结果，就算Network有返回，也可能存在返回内容不符合预期的情况：

useEffect(() => {
  fetch("http://localhost/WaterRefillingStation/app/controllers/timesheet_controller.php")
  .then(response => {
    // 先确认接口请求成功
    if(!response.ok) throw new Error('接口请求异常')
    return response.json()
  })
  .then((result) => {
    // 打印返回结果，确认是不是你要的数组、字段名是否匹配
    console.log('接口返回结果：', result)
    setItem(result)
  })
  // 捕获所有异常，避免静默失败
  .catch(err => console.error('数据获取失败：', err))
}, [])

打印后如果发现返回的不是直接的数组，而是类似{code:200, data: [...], msg: 'success'}这种包裹结构，需要把setItem(result)改成setItem(result.data)。

2. 修复map遍历的key属性错误
   你当前写的key={item}是把对象直接传给key，React会将对象转为[object Object]，属于无效key，会导致渲染异常，替换为唯一标识字段即可：

// 把key改成你数据里的唯一值，比如userID，同时把遍历变量名改了避免和外层状态重名
{item.map(entry => (
  <tr key={entry.userID}>
    {/* 其余单元格内容不变 */}
  </tr>
))}

3. 提前做兜底校验，避免空数据/类型错误
   如果接口可能返回非数组类型，遍历前加校验避免报错：

{Array.isArray(item) && item.map(entry => (
  <tr key={entry.userID}>
    {/* 单元格内容不变 */}
  </tr>
))}

4. 额外的语法修复（不影响数据渲染，但会导致样式失效）
   你的className里的逗号是多余的，React的className用空格分隔多个类名：

// 错误写法
<div className="d_flex my-4, text-uppercase">
<div className="float-end, tryy"  >
// 正确写法
<div className="d_flex my-4 text-uppercase">
<div className="float-end tryy">

验证步骤 #

你可以先给状态设置模拟测试数据，确认渲染逻辑本身没问题：

const [item, setItem] = useState([
  {
    userID: 1,
    birthday: '2024-01-01',
    profpic: 'test.jpg',
    lastname: '张',
    firstname: '三',
    designation: '员工',
    created_at: '09:00:00',
    updated_at: '18:00:00'
  }
])

如果模拟数据能正常渲染，就可以确定问题出在接口返回的数据结构和你预期不符，对照第一步打印的结果调整赋值逻辑即可。

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