在 nextjs 服务器组件中返回子级时出错

Question

"use client";

-- Some imports and interfaces

const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
    const [data, setData] = useState<SubscriptionData>({});

    -- Some functions
    return <>{children(data)}</>;
};

export default SubscriptionDataFetcher;

我有这个应用程序需要调用 trpc 路由，我决定这样调用它并将子项返回到服务器组件：

export const dynamic = 'force-dynamic';

--some interfaces

const Packages: React.FC = () => {
    <SubscriptionDataFetcher>
        {({ x, y }) => (

        )}
    </SubscriptionDataFetcher>
export default Packages;

我总是收到此错误，但不知道这意味着什么或如何正确处理子项返回：

Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it.
  <... children={function children}>

Answer 1

在您的 SubscriptionDataFetcher 组件中，您期望 Children 是一个以数据作为参数的函数。但是，在您的 Packages 组件中，您尝试将此函数用作 SubscriptionDataFetcher 的子函数，这导致了错误。

要解决此问题，您可以更改 SubscriptionDataFetcher 以直接渲染其子级，并将数据作为 prop 传递给子级。方法如下：

const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
  const [data, setData] = useState<SubscriptionData>({});

  // Some functions

  return <>{children}</>;
};

然后，在您的 Packages 组件中，您可以使用数据作为 prop：

const Packages: React.FC = () => {
  return (
    <SubscriptionDataFetcher>
      <ChildComponent data={data} />
    </SubscriptionDataFetcher>
  );
};

如果你想保留 function-as-child 模式，你可以使用 React.cloneElement 函数来克隆子元素并将数据作为 prop 传递：

const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
  const [data, setData] = useState<SubscriptionData>({});

  // Some functions

  return <>{React.cloneElement(children, { data })}</>;
};

然后，在您的 Packages 组件中，您可以使用数据作为 prop：

const Packages: React.FC = () => {
  return (
    <SubscriptionDataFetcher>
      <ChildComponent />
    </SubscriptionDataFetcher>
  );
};