MERN栈中如何通过Fetch API获取字段值？React渲染报错求助

核心问题 #

你直接把async函数的调用结果传给了ProductDetails的title属性，但所有async函数调用后返回的都是Promise对象——哪怕函数内部最终return的是string，在await完成前，它返回的依然是一个未resolved的Promise。React无法渲染Promise对象，所以抛出"Objects are not valid as a React child"的错误。

解决步骤 #

• 用useState存储title值：初始化状态为null或空字符串，用于保存最终获取到的title。
• 用useEffect执行异步请求：在组件挂载时调用你的异步函数，拿到结果后更新状态。
• 处理加载状态：在title未获取到前，渲染加载提示或占位内容，避免渲染无效值。

修正后的代码示例 #

import { useState, useEffect } from 'react';

// 异步获取title的函数
async function fetchProductTitle() {
  const response = await fetch('/your-api-endpoint');
  const productData = await response.json();
  return productData.title;
}

function ProductPage() {
  // 初始化title状态
  const [productTitle, setProductTitle] = useState(null);

  // 组件挂载时执行异步请求
  useEffect(() => {
    const loadTitle = async () => {
      const title = await fetchProductTitle();
      setProductTitle(title);
    };

    loadTitle();
  }, []); // 空依赖数组确保只执行一次

  // 加载状态处理
  if (!productTitle) {
    return <div>加载中...</div>;
  }

  // 传入实际的字符串title
  return <ProductDetails title={productTitle} />;
}

额外说明 #

• 不要在组件的渲染阶段直接调用async函数，因为每次渲染都会重新调用，不仅会导致重复请求，还会持续返回Promise引发错误。
• 如果需要处理请求错误，可以在async函数中添加try/catch块，更新错误状态并展示错误信息。

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