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


Partager Favoris Signaler
Nekomusume

1 réponse

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


Réponse à 2024-07-21 00:19:43
Signaler