React中fetch请求Node后端返回Undefined问题求助

你的代码里有几个关键问题，导致数据返回undefined：

• 箭头函数未返回值：第一个.then里的箭头函数用了花括号，但没有显式返回res.json()，Promise链后续拿到的自然是undefined。要么去掉花括号写成res => res.json()，要么加上return语句：res => { return res.json(); }

• useEffect缺少依赖数组：你的useEffect没有第二个参数（依赖数组），这会导致组件每次渲染都重复执行fetch请求，造成无限循环。必须加上空数组[]，让它只在组件挂载时执行一次。

• 状态更新函数拼写错误：你定义的状态是response，但更新函数写成了setReponse（少了一个s），就算后续要把数据存到状态里也会失败。

• 未处理请求错误：fetch请求遇到网络错误或后端返回错误状态码（比如404、500）时，不会自动抛出错误，需要手动判断res.ok或者添加catch块处理异常。

修复后的代码示例：

import React, { useState, useEffect } from "react";

function App() {
  const [response, setResponse] = useState([]); // 修正拼写错误

  useEffect(() => {
    fetch("http://localhost:5000/api")
      .then(res => {
        if (!res.ok) {
          throw new Error('请求失败'); // 处理后端返回的错误状态码
        }
        return res.json(); // 显式返回解析后的JSON数据
      })
      .then(data => {
        console.log({ data });
        setResponse(data); // 将数据存入状态
      })
      .catch(err => {
        console.error('请求出错:', err); // 捕获网络或解析错误
      });
  }, []); // 空依赖数组，确保只执行一次

  return (
    <div>
      {/* 根据实际数据结构调整渲染逻辑 */}
      {response.length > 0 ? (
        <ul>
          {response.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

export default App;

另外还要确认你的Node后端是否配置了CORS，因为前后端端口不同会触发跨域限制，如果后端没处理CORS，浏览器控制台会出现跨域错误提示，需要在Node后端安装cors包并启用。

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