React useEffect内fetch获取的嵌套数组数据无法渲染问题

• 字段名不匹配
  子组件中取值使用的helado.study_name和接口返回的数组对象实际字段名不一致，可能是拼写错误、大小写差异、或者字段名是驼峰格式（如studyName）。
  排查方式：在prop.map遍历逻辑中添加打印console.log(helado.study_name)，如果输出为undefined即可确认是该问题，修改为正确的字段名即可解决。

• 数据获取逻辑缺少异常校验
  当前fetch请求没有做响应状态校验和异常捕获，存在以下问题：

1. 接口返回4xx/5xx错误时，response.json()依然会执行，可能拿到不符合预期的data结构
2. 浏览器控制台打印的数组是引用类型值，打印时的预览和展开后的实际值可能存在差异，你看到的4条数据不一定是渲染时拿到的真实数据
   排查方式：打印JSON.stringify(prop)确认实际拿到的数据结构，同时补充请求校验逻辑：

useEffect(() => {
  fetch("/list_initialized")
    .then((response) => {
      // 校验请求是否成功
      if (!response.ok) throw new Error(`请求错误，状态码：${response.status}`)
      return response.json()
    })
    .then((data) => {
      // 兼容字段不存在的情况
      setHelados([...(data.list_helado || [])]);
    })
    .catch(err => console.error('拉取列表失败：', err))
}, []);

• Semantic UI 组件样式冲突
  如果确认数据和字段都正确，大概率是组件样式异常导致渲染的内容不可见：

1. 可能是List、Header组件的默认文字颜色和页面背景色一致
2. 组件被全局样式覆盖设置了display: none、高度为0、透明度为0等
   排查方式：打开浏览器开发者工具的元素面板，查看<List>节点下是否生成了对应数量的<List.Item>子节点，如果存在子节点只是视觉上不可见，调整对应样式即可。

• React严格模式副作用重复执行异常
  如果你的项目在开发环境用<React.StrictMode>包裹了根组件，useEffect会执行两次，如果你的接口未做幂等处理，可能导致数据更新异常，可以暂时关闭严格模式测试是否恢复正常。

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