Next.js中使用Tremor DonutChart组件的函数传递错误排查

你遇到的错误根源在于：App Router规则下，服务端组件不能直接给客户端组件传递函数，而你错误地把整个组件标记成了服务端组件（用了"use server"），再加上Tremor的DonutChart本身是客户端组件，传递valueFormatter时就触发了冲突。

按以下步骤修改即可解决：

• 移除文件顶部的"use server";指令，这个组件不需要以服务端组件运行
• 在文件最顶部添加"use client";，明确标记这是客户端组件
• 去掉DonutChartComponent的async关键字，这里没有异步操作需求
• 删掉valueFormatter上的// @ts-ignore和无效的服务端标记，客户端组件内的函数可直接传给Tremor组件的props

修改后的完整代码：

"use client";

import { Card, Title, DonutChart } from "@tremor/react";

const cities = [
  {
    name: "New York",
    sales: 9800,
  },
  {
    name: "London",
    sales: 4567,
  },
  {
    name: "Hong Kong",
    sales: 3908,
  },
  {
    name: "San Francisco",
    sales: 2400,
  },
  {
    name: "Singapore",
    sales: 1908,
  },
  {
    name: "Zurich",
    sales: 1398,
  },
];

const valueFormatter = (number: number) =>
  `$ ${Intl.NumberFormat("us").format(number).toString()}`;

function DonutChartComponent() {
  return (
    <Card className="max-w-lg">
      <Title>Sales</Title>
      <DonutChart
        className="mt-6"
        data={cities}
        category="sales"
        index="name"
        valueFormatter={valueFormatter}
        colors={["slate", "violet", "indigo", "rose", "cyan", "amber"]}
      />
    </Card>
  );
}

export default DonutChartComponent;

补充说明：Tremor的所有UI组件都是客户端组件，因此使用它们的父组件必须标记"use client"。客户端组件内部定义的工具函数可以直接传递给Tremor组件的props，不需要额外的服务端相关标记。

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