ant-design ant design table render issue with nexths, Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

gijlo24d  于 21天前  发布在  Ant Design
关注(0)|答案(4)|浏览(41)

Steps to reproduce

I am quite new to Nextjs. here are the steps to reproduce the issue I am facing. If don't add 'use server' directive to render functionality of columns data, it will throw error like this 'Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

{
    title: "",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "歌曲名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "时长",
    dataIndex: "dt",
    key: "dt",
  },
  {
    title: "歌手",
    render: async (record) => {
      const tempStrArr: string[] = [];
      record.ar.forEach((artist: IArtistType) => {
        tempStrArr.push(artist.name);
      });

      return tempStrArr.join(",");
    },
  },
  {
    title: "专辑",
    render: async (record) => {
      return record.al.name;
    },
  },
]```

// If add 'use server' directive, the error will disapear, but 'getInitData' functionality will be called many times from client side.
```const columns: TableColumnsType = [
  {
    title: "",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "歌曲名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "时长",
    dataIndex: "dt",
    key: "dt",
  },
  {
    title: "歌手",
    render: async (record) => {
     'use server'
      const tempStrArr: string[] = [];
      record.ar.forEach((artist: IArtistType) => {
        tempStrArr.push(artist.name);
      });
      return tempStrArr.join(",");
    },
  },
  {
    title: "专辑",
    render: async (record) => {
     'use server'
      return record.al.name;
    },
  },
]```

### What is expected?

expect that 'getInitData' functionality only be called once from server side.

### What is actually happening?

'getInitData' functionality just be called once from server side but so many times from client side.

| Environment | Info |
| --- | --- |
| nextjs | 14.2.5 |
| antd | 5.19.1 |
| React | 18.3.3 |
| System | win11 |
| Browser | chrome 126.0.6478.128 |

<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->
7ivaypg9

7ivaypg92#

here are the screen shots:

kg7wmglp

kg7wmglp3#

Same here, any solution?

mbzjlibv

mbzjlibv4#

This is because next.js believes that all functions should be executed on the server side. However, functions in antd are to be executed on the client side. This problem can be solved by manually marking it as being executed on the client side, that is, adding "use client"; at the beginning of the file;

相关问题