Next.js 13：使用async/await获取数据时出现“Objects are not valid as a React child”错误

vecaoik1 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(209)

我使用Next.js 13与新的应用程序目录，我试图从我的API获取数据。但当我尝试使用async/await时，我一直得到错误：“* 对象作为React子对象无效（找到：[object Promise]）。如果你想呈现一个子元素的集合，请使用数组。*”

async function getProducts() {
  const { data } = await storefront(productsQuery);
  return data.products;
}

export default async function Page({ params }: any) {
    const fetchedData = await getProducts();

    return (<>
        {fetchedData.edges.map((item: any) => (
            <Text>{item.node.title}</Text>
        ))}
    </>);
}

这是我的代码。我从API接收的数据是：

"data": {         
  "products": {             
   "edges": [                 
    {                     
     "node": {                         
      "title": "Some title",                     
     }                 
    }             
   ]         
  }     
 } 
}

我尝试使用toString（）和map函数中的key属性将标题转换为字符串，但错误仍然存在。在每个文件的顶部，因为我使用脉轮用户界面，但这似乎并不是问题的根源。
我做错了什么？我如何在Next.js应用中正确获取和呈现数据？
提前感谢您的帮助！

next.js

来源：https://stackoverflow.com/questions/76004566/next-js-13-objects-are-not-valid-as-a-react-child-error-when-fetching-data-wi

2条答案

按热度按时间

scyqe7ek1#

通过使用async关键字function Page（它是一个组件），你暗示这个函数返回一个promise而不是一个react组件。你的函数现在将你的react组件数组 Package 在一个promise中。函数式组件不能返回promise。

赞(0）回复(0）举报 2023-04-20

fykwrbwg2#

您需要确保获取的数据可用。例如：

export default function Page({ params }: any) {
  const [fetchedData, setFetchedData] = useState([]);

  useEffect(() => {
    (async () => {
      const data = await getProducts();
      setFetchedData(data.edges);
    })();
  }, []);

  return (<>
        {fetchedData.edges.map((item: any) => (
            <Text>{item.node.title}</Text>
        ))}
    </>);
}

赞(0）回复(0）举报 2023-04-20

我来回答

Next.js 13：使用async/await获取数据时出现“Objects are not valid as a React child”错误

2条答案

相关问题

热门标签

最新问答