React条件渲染加载状态异常及数据渲染报错排查

你遇到的问题本质是状态初始值定义错误+字段名和后端返回结构不匹配导致的：

• 初始状态useState([{}])设置的是「包含空对象的数组」，但后端接口实际返回的是普通对象，数据类型从一开始就不对，后续不管是用typeof data.members === 'undefined'还是data.length === 0判断加载状态，都会出现逻辑偏差。
• 你的渲染逻辑里一直访问data.members字段，但对照你贴的后端返回JSON，顶层根本不存在members这个属性，只有Information数组字段。所以哪怕接口数据成功返回、setData执行完成，data.members永远是undefined，自然会一直显示Loading；后续改了判断条件之后，尝试对undefined调用map方法，就直接抛出了类型错误。

1. 修正状态初始值，用null明确标识「未加载完成」状态，同时给fetch加错误捕获，避免接口异常时页面崩溃：

// 初始值设为null，代表还没拿到接口数据
const [data, setData] = useState(null)

useEffect(() =>{
  fetch("/details")
    .then(res => res.json())
    .then(resData => {
      setData(resData)
    })
    .catch(err => {
      console.error("接口请求失败:", err)
    })
}, [])

如果你需要点击按钮才触发数据拉取，不要把请求逻辑放在空依赖的useEffect里（这会在页面首次加载时就发请求），把请求逻辑单独封装成函数，绑定到按钮的onClick事件上即可。

2. 修正渲染逻辑，对齐后端实际返回的字段结构：

return (
  <div>
    {/* 保留你原有的其他组件，比如FileList */}
    <FileList files={files} removeFile={removeFile} />
    <div>
      {/* 数据为null时说明还在加载 */}
      {!data ? (
        <p>Loading...</p>
      ) : (
        // 注意访问的是接口实际返回的Information字段，不是不存在的members
        data.Information.map((infoItem, index) => (
          <div key={index}>
            <p>姓名：{infoItem.name}</p>
            <p>邮箱：{infoItem.email}</p>
            <p>手机号：{infoItem.mobile_number}</p>
            <p>总工作年限：{infoItem.total_experience}年</p>
            <p>技能清单：</p>
            <ul>
              {infoItem.skills.map((skill, skillIndex) => (
                <li key={skillIndex}>{skill}</li>
              ))}
            </ul>
            {/* 其他字段比如experience、company_names按照相同方式取即可 */}
          </div>
        ))
      )}
    </div>
  </div>
);

写前端渲染逻辑前，先以控制台打印的接口返回结构为准，不要自行臆想字段名，这类字段不匹配的问题可以通过提前对照接口返回值逐层确认结构避免。

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