I'm getting this error when using Message
Warning: [antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.Here is my code:
import { message } from 'antd';
export default function Page() {
const [messageApi, contextHolder] = message.useMessage();
const res = await fetch("/api/...", {
method: "POST",
});
if (!res.ok) {
messageApi.error("Error! Fail to login!");
}
return (
<Home>
...
</Home>
)
}1 answer
Using message directly instead of messageApi to solve this error is absurd. In fact, in this question, the error occurs due to the missing of contextHolder on top of the return. So the solution to this error is just adding the contextHolder:
import { message } from 'antd';
export default function Page() {
const [messageApi, contextHolder] = message.useMessage();
return (
<>
{contextHolder}
<Home>
...
</Home>
</>
)
}