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


共有 お気に入り 通報
Nekomusume

1 件の回答

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


2024-07-21 00:19:43に投稿されました
通報