如何在React中展示GET请求返回的列表数据：已获取数据但页面不渲染

问题原因 #

• 你在axios请求中配置了mode: 'no-cors'，该模式下请求返回的是不透明响应，无法正常读取响应体内容，即使控制台打印看起来有数据，实际无法被JS正常访问赋值给state
• 列表渲染不符合规范：<ul>的直接子元素应为<li>而非<h3>，同时map遍历的元素没有添加唯一key属性，会触发React渲染警告
• 接口返回结构校验缺失：如果result.data本身就是你需要遍历的学生数据数组，你在map回调中再次取results.data属于结构取值错误
• 异步函数层级冗余：handleClick本身已经声明为async，不需要内部再嵌套一层fetchData异步函数

修复方案 #

首先在后端接口配置CORS跨域规则，允许你的前端地址访问，移除mode: 'no-cors'配置，再调整组件代码如下：

import React, { useState } from 'react';
import axios from 'axios'

export default function Datateacher() {
  const [result, setResult] = useState([]);

  const handleClick = async () => {
    const res = await axios.get(`http://localhost:8000/state`);
    // 可在此处打印确认返回结构，确保赋值的是需要遍历的数组
    console.log(res.data)
    setResult(res.data)
  };

  return (
    <div>
      <button type="button" onClick={handleClick} >
        Get studentdata
      </button>
      <div>
        <h3>学生数据列表</h3>
        <ul>
          {/* 假设数组每一项有唯一id作为key，渲染字段根据实际返回结构调整即可 */}
          {result.map(item => <li key={item.id}>{item.data}</li>)}
        </ul>
      </div>
    </div>
  )
}

额外排查点 #

如果修改后仍无法正常渲染，可在return代码前打印result的值，确认state已经被正确赋值为预期的数组结构，同时检查返回数据的字段名是否和渲染时的取值一致。

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