React中映射GraphQL API返回的JSON响应并渲染组件的问题排查与解决

咱们一步步拆解你遇到的问题，其实都是因为对React函数组件的规则和hooks使用条件理解不到位导致的：

第一个错误：Objects are not valid as a React child (found: [object Promise]) #

你一开始把App定义成了async function——但React的函数组件要求必须返回JSX（或者null/undefined），而async函数的返回值本质上是一个Promise对象，React根本不知道怎么渲染一个Promise，所以就抛出了这个错误。

第二个错误：Invalid hook call. Hooks can only be called inside of the body of a function component. #

同样还是因为App是async函数的锅：React的函数组件必须是一个纯函数（接收props，返回React元素），而async函数返回的是Promise，它已经不再是React认可的函数组件了。hooks（比如useState/useEffect）只能在React函数组件的顶层或者自定义hooks里调用，所以在非函数组件里用hooks就会触发这个错误。

正确的解决方案 #

核心就是：把App改成普通的函数组件（去掉async关键字），然后在useEffect内部处理异步数据获取逻辑。

完整的正确代码 #

App.js

import { useState, useEffect } from 'react';
import axios from 'axios';
import ProductCard from './ProductCard';

// 保持你的API调用函数不变
async function contactAPI() {
  return await axios({
    url: 'https://graphqlexample.com/api/products',
    method: 'post',
    data: { query: ` YOUR GRAPHQL QUERY HERE ` }
  });
}

// 普通的React函数组件，不要加async！
function App() {
  // 用useState存储产品数据，初始值设为空数组
  const [products, setProducts] = useState([]);

  useEffect(() => {
    // 在useEffect内部定义一个async函数来处理数据获取
    // 注意：useEffect的回调不能直接是async，因为它期望返回清理函数，async会返回Promise
    const fetchProducts = async () => {
      try {
        const resp = await contactAPI();
        // 正确提取API返回的产品数组
        setProducts(resp.data.data.products);
      } catch (error) {
        // 一定要加错误处理，避免API调用失败时页面崩溃
        console.error('获取产品数据失败:', error);
      }
    };

    // 调用这个异步函数
    fetchProducts();
  }, []); // 空依赖数组表示这个effect只在组件挂载时执行一次

  return (
    <div>
      {/* 遍历产品数组渲染组件，记得加key属性！ */}
      {products.map((product, index) => (
        <div key={index}>
          <ProductCard productName={product.productName} />
        </div>
      ))}
    </div>
  );
}

export default App;

ProductCard.js（可优化简化）

// 用解构赋值简化props接收
function ProductCard({ productName }) {
  return (
    <div>
      <div>{productName}</div>
    </div>
  );
}

export default ProductCard;

关键注意点 #

1. 永远不要把React函数组件定义为async函数：组件必须返回React元素，而不是Promise。
2. 异步逻辑要放在useEffect内部：并且要在useEffect里嵌套async函数，不能直接把useEffect的回调设为async（否则会导致React警告，因为它无法识别Promise作为清理函数）。
3. 给列表项加key属性：这是React列表渲染的最佳实践，帮助React高效更新DOM，避免不必要的重渲染。
4. 添加错误处理：API调用可能失败，用try/catch捕获错误，提升用户体验和代码健壮性。

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