React中useEffect与async/await使用问题：无法获取产品数据

1. 核心错误：URL格式错误 #

你的url变量少写了一个斜杠，正确地址应为http://localhost:3000/products，原代码里的http:/localhost:3000/products会导致请求地址无效，这是无法获取数据的直接原因。

2. 补充错误处理，避免静默失败 #

fetch请求不会对HTTP错误（如404、500）自动抛出异常，加上try/catch和响应状态判断，能快速定位问题：

const fetchData = async () => {
  try {
    const data = await fetch(url);
    // 判断请求是否成功
    if (!data.ok) {
      throw new Error(`请求失败，状态码：${data.status}`);
    }
    console.log("响应对象：", data); // 用逗号分隔保留对象结构
    const res = await data.json();
    console.log("产品数据：", res);
    setProducts(res);
  } catch (error) {
    console.error("获取数据出错：", error);
  }
}

3. 优化控制台打印方式 #

之前用"Data:" + data会把对象转成[object Response]这类无意义字符串，改用逗号分隔可以保留原对象结构，方便调试。

修正后的完整App.js代码 #

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

// 修正URL格式
const url="http://localhost:3000/products";

function App() {
  const [products, setProducts] = useState ([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const data = await fetch(url);
        if (!data.ok) {
          throw new Error(`请求失败，状态码：${data.status}`);
        }
        console.log("响应对象：", data);
        const res = await data.json();
        console.log("产品数据：", res);
        setProducts(res);
      } catch (error) {
        console.error("获取数据出错：", error);
      }
    }
    fetchData();  
  }, []);

  console.log("当前products状态：", products);
 
  return (
    <div className="App">
      <h1>产品列表</h1>
      {/* 可选：渲染产品列表到页面 */}
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

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