reactjs 如何在Next JS中使用客户端组件中的javascript/await?

krcsximq  于 2024-01-07  发布在  React
关注(0)|答案(1)|浏览(254)

我已经在这方面工作了一段时间,我甚至不能使它工作.问题是,我想通过一个值到我的服务器动作prisma从我的状态管理上下文.但每次我试图运行我的代码,它抛出一个错误.
在我的客户端组件中

  1. "use client";
  2. import { Products, columns } from "@/app/store/columns";
  3. import { DataTable } from "@/app/store/data-table";
  4. import { getData } from "@/lib/store/get-product";
  5. import { useProductPagination } from "@/lib/store/product-pagination";
  6. import React from "react";
  7. async function StoreTable() {
  8. const { page, perPage } = useProductPagination();
  9. const data = await getData(perPage, page);
  10. return (
  11. <div className="w-screen pr-4 sm:pr-8 md:pr-10 max-w-7xl mx-auto">
  12. <DataTable data={data} columns={columns} />
  13. </div>
  14. );
  15. }
  16. export default StoreTable;

字符串
我尝试处理的服务器操作是

  1. import { Products } from "@/app/store/columns";
  2. import prismadb from "../prismadb";
  3. export async function getData(perPage: number, page: number): Promise<Products[]> {
  4. const products = await prismadb.product.findMany({
  5. skip: perPage,
  6. take: page,
  7. });
  8. return products.map((product, i) => ({
  9. id: i + 1,
  10. name: product.name,
  11. description: product.description,
  12. category: product.category,
  13. origin: product.origin,
  14. sell: product.sellingPrice,
  15. purchase: product.purchasedPrice,
  16. amount: Math.random() * 100,
  17. status: product.status == "active" ? "active" : "inactive",
  18. }));
  19. }


但我面临的错误是Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding '使用客户端' to a module that was originally written for the server.
我试图做的是实现分页到我的数据表和处理在prisma页.但我没有idea什么我必须做.
所以请帮帮我

dsekswqp

dsekswqp1#

使用client components你不能直接调用一个等待的函数(API请求)。所以你应该使用useEffect来使事情正常工作。你能试试下面的代码吗:

  1. import { useState, useEffect } from 'react';
  2. import { Products, columns } from "@/app/store/columns";
  3. import { DataTable } from "@/app/store/data-table";
  4. import { getData } from "@/lib/store/get-product";
  5. import { useProductPagination } from "@/lib/store/product-pagination";
  6. import React from "react";
  7. function StoreTable() {
  8. const { page, perPage } = useProductPagination();
  9. const [data, setData] = useState([]); // based on your data you should store it here in state
  10. useEffect(() => {
  11. const fetchData = async () => {
  12. try {
  13. const result = await getData(perPage, page);
  14. setData(result);
  15. } catch (error) {
  16. console.error('Error fetching data:', error);
  17. }
  18. };
  19. fetchData();
  20. }, [perPage, page]);
  21. return (
  22. <div className="w-screen pr-4 sm:pr-8 md:pr-10 max-w-7xl mx-auto">
  23. <DataTable data={data} columns={columns} />
  24. </div>
  25. );
  26. }
  27. export default StoreTable;

字符串
希望这对你有帮助!祝你好运:)。

展开查看全部

相关问题