·
NekomusumeNekomusume
·
313
·
2024-07-21 00:08

[antd: Message] You are calling notice in render which will break in React 18 concurrent mode. Please trigger in effect instead.

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>
  )
}


Share Favourite Flag

1 answer

Nekomusume
Nekomusume

如果我们能知道过去的一切，就能知道未来⏳......

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>
    </>
  )
}


Answer at 2024-07-21 00:19:43
Flag