React中通过Bearer Token API获取数据无法渲染问题排查

核心错误排查 #

• 状态更新函数拼写错误：useState定义的setter写成了setProdcts，正确应为setProducts，拼写错误导致无法更新组件状态。
• 未将API返回数据存入状态：fetch的第二个then回调仅打印了返回的json数据，未调用setProducts更新状态，所以组件的products始终是空数组，无法触发渲染。
• 属性访问语法错误：product. Name中属性名前多了空格，正确写法是product.Name，空格会导致无法读取到对应属性值。
• fetch未放在useEffect中：直接在组件顶层写fetch会导致每次组件渲染都重复发起请求，浪费资源且可能引发异常，需用useEffect包裹并添加合适依赖项。

修正后的代码示例 #

import { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);      
  const accessToken = "你的有效Token"; // 替换为实际的accessToken

  useEffect(() => {
    fetch("https://RANDOMAPI.com/api/products", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${accessToken}`,
        "Content-Type": "application/json",
      },
      mode: "cors",
      cache: "default",
    })
      .then((response) => {
        // 新增：检查响应是否成功
        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }
        return response.json();
      })
      .then((json) => {
        // 注意：若API返回数据是嵌套结构（如{ data: [...] }），需改为setProducts(json.data)
        setProducts(json);
      })
      .catch((error) => console.error("获取产品数据失败：", error));
  }, [accessToken]); // 依赖accessToken，Token变化时自动重新请求

  return (
    <>
      {products?.length > 0 ? (
        <div className="container">
          {products.map((product) => (
            <div key={product.id} className="product"> {/* 必须添加唯一key属性 */}
              <p>{product.Name}</p>
            </div>
          ))}
        </div>
      ) : (
        <div className="empty">
          <h2>No products found</h2>
        </div>
      )}
    </>
  );
}

export default ProductList;

其他数据展示方式 #

除了map遍历数组渲染，还可根据数据结构选择以下方式：

• 单个对象直接渲染：若API返回单个产品对象，直接通过属性访问展示，比如<p>产品名称：{product.Name}</p>。
• 表格结构化展示：用HTML <table>标签，遍历数组生成<tr>和<td>，适合需要清晰展示多字段的场景。
• 遍历对象所有属性：如果产品是复杂对象，可通过Object.entries(product).map(([key, value]) => <p>{key}: {value}</p>)展示所有属性键值对。
• 组件化封装展示：将单个产品的UI封装成独立的ProductCard组件，在遍历中渲染<ProductCard product={product} />，提升代码复用性和可维护性。

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