React项目调用API后数据返回undefined的问题求助

问题根源分析 #

你的代码存在两个关键错误，导致控制台输出undefined且无法正确获取数据：

1. JSON解析未调用方法
   response.json是fetch返回的Response对象的方法，必须加括号调用才能解析响应体。原代码中直接赋值方法本身，导致recdata是函数而非解析后的数据，自然无法读取recdata["data"]。

2. 组件返回值不符合要求
   React组件的return必须返回有效的JSX元素，而你直接返回console.log(records)——该函数执行后返回undefined，这也是控制台输出undefined的原因之一。

修正后的完整代码 #

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  const [records, setRecords] = useState([]);

  useEffect(() => {
    getData();
  }, []);

  // 监听数据变化，在控制台打印最新值
  useEffect(() => {
    console.log('当前学生数据:', records);
  }, [records]);

  const getData = async () => {
    try {
      const response = await fetch('https://localhost:7280/api/Student/GetAll');
      // 调用json()方法解析响应体
      const recdata = await response.json();
      // 校验响应格式后更新状态
      if (recdata.success && recdata.data) {
        setRecords(recdata.data);
      } else {
        console.error('API响应格式异常:', recdata);
      }
    } catch (error) {
      // 捕获网络请求或解析错误
      console.error('获取数据失败:', error);
    }
  };

  // 返回有效JSX渲染数据
  return (
    <div className="App">
      <h2>学生列表</h2>
      <ul>
        {records.map(student => (
          <li key={student.id}>
            {student.firstName} {student.lastName}
            <br />邮箱: {student.email}
            <br />电话: {student.telephone}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

额外优化说明 #

• 新增try/catch捕获网络请求或解析过程中的异常，便于排查问题
• 添加监听records变化的useEffect，确保数据更新时能在控制台看到正确结果
• 返回标准JSX结构展示数据，符合React组件的渲染要求
• 增加响应格式校验，避免因API返回异常导致状态错误

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