Reproduction link
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 -->
4条答案
按热度按时间6pp0gazn1#
Start a new pull request in StackBlitz Codeflow .
7ivaypg92#
here are the screen shots:
kg7wmglp3#
Same here, any solution?
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;