create-react-app中fetch请求API返回等长空白列表问题求助

直接定位最明显的代码问题 #

你现在渲染列表的<li>标签内部没有写入任何需要展示的字段内容，这是空条目最直接的原因。当前列表渲染代码：

{items.map(item => (
  <li key={item.id}>
  {/* 这里完全没写要渲染的item内容，当然输出空标签 */}
  </li>
))}

条目数量和接口返回数组长度一致，说明你的fetch请求、state赋值逻辑都是正常跑通的，循环执行的次数完全正确，只是标签里没填内容。

其他需要排查的点 #

• 补全标签内的渲染逻辑，对应接口返回的字段写入内容即可，比如接口有order字段就对应取值：

<li key={item.id}>
  排序值：{item.order}
</li>

• 核对接口返回的实际数据结构，打开浏览器控制台看你代码里写的console.log(result)打印的内容：

  注意：很多接口返回的结构是外层包了一层状态字段，比如{ code: 200, data: [/* 实际列表数据 */] }，如果你直接把整个响应结果set给items，那循环拿到的item根本不是列表元素，自然读不到任何字段内容，这种情况要改成setItems(result.data)

• 检查你贴的JSON样例的格式问题：你贴的样例里"order": x字段跑到了第一个对象的大括号外部，属于非法JSON格式，如果实际接口返回这种结构，res.json()会直接抛解析错误走error分支，你现在没走到error页说明实际返回格式是正常的，以控制台打印的真实数据结构为准。
• 给fetch加HTTP状态校验，fetch默认不会在4xx、5xx状态码的时候抛出错误，很容易拿到错误响应还当正常数据解析，建议补上：

fetch("URL")
  .then(res => {
    if (!res.ok) throw new Error(`请求错误，状态码${res.status}`)
    return res.json()
  })
  // 后续原有result、error处理逻辑不变

• 核对字段名拼写，JS对象属性大小写敏感，比如接口返回的是ID你写item.id是读不到值的。

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