ReactJS警告：渲染Layout时更新UseToastComponent问题求助

问题场景 #

我实现了一个基于Portal的全局弹窗通知组件UseToastComponent，用于新数据推送。组件在_app.js中引入方式如下：

<QueryClientProvider client={queryClient}>
  <UseToastComponent settings={{ autoClose: false }} />
  {getLayout(<Component {...pageProps} />)}
</QueryClientProvider>

UseToastComponent核心渲染逻辑：

return (
  <>
    {loaded &&
      ReactDOM.createPortal(
        <div className="mb-6 mr-6">
          {toasts.map((toast) => (
            <PopupNotification
              key={toast.id}
              // 弹窗属性配置
            />
          ))}
        </div>,
        document.getElementById(portalId)
      )}
  </>
);

其中toasts是全局状态，由Layout组件定时更新，更新逻辑如下：

data.data.documents.forEach((doc) => {
  addToast({
    // 弹窗配置项
  });
});

Layout中还有状态更新逻辑：

if (dayjs(data.data.documents[0].createdAt).isAfter(firstTimeCreated)) {
  setFirstTimeCreated(data.data.documents[0].createdAt);
}
data.data.documents.forEach((doc) => {
  addToast({
    // 弹窗配置项
  });
});

遇到的问题 #

首次渲染（页面刷新或UseToastComponent在toasts.length>0时首次渲染）时，出现警告：

Warning: Cannot update a component (UseToastComponent) while rendering a different component (Layout). To locate the bad setState() call inside Layout...

原因分析 #

警告的核心原因是：在Layout组件的渲染过程中，直接调用了addToast（本质是更新UseToastComponent的状态）。React禁止在一个组件的渲染阶段触发另一个组件的状态更新，这会打乱组件的渲染生命周期，导致不可预测的行为。

解决方案 #

1. 将状态更新移至useEffect钩子中 #

把Layout中所有更新状态（包括setFirstTimeCreated和addToast）的逻辑，移到useEffect里，确保操作在组件渲染完成后执行：

import { useEffect } from 'react';

// Layout组件内部
const Layout = () => {
  const [firstTimeCreated, setFirstTimeCreated] = useState(/* 初始值 */);
  const { data } = useQuery('documents', fetchDocuments);
  const addToast = useToast(); // 假设是全局状态的钩子

  useEffect(() => {
    if (!data?.data?.documents) return;

    // 更新firstTimeCreated状态
    const latestDocCreatedAt = data.data.documents[0].createdAt;
    if (dayjs(latestDocCreatedAt).isAfter(firstTimeCreated)) {
      setFirstTimeCreated(latestDocCreatedAt);
    }

    // 添加弹窗通知
    data.data.documents.forEach((doc) => {
      addToast({
        id: doc.id,
        message: `新数据：${doc.title}`
        // 其他弹窗配置
      });
    });
  }, [data, firstTimeCreated, addToast]); // 依赖项需包含所有用到的外部变量

  // 其余渲染逻辑...
};

2. 结合useQuery的onSuccess回调处理（可选） #

如果是通过useQuery获取数据，也可以在onSuccess回调中处理状态更新，但如果涉及组件内部状态（如firstTimeCreated），仍需配合useEffect监听数据变化，避免在渲染阶段触发更新：

const { data } = useQuery('documents', fetchDocuments, {
  onSuccess: (fetchedData) => {
    // 直接处理弹窗添加逻辑
    fetchedData.data.documents.forEach(doc => addToast({
      id: doc.id,
      message: `新数据：${doc.title}`
    }));
  }
});

// 通过useEffect处理依赖组件内部状态的逻辑
useEffect(() => {
  if (!data) return;
  const latestDocCreatedAt = data.data.documents[0].createdAt;
  if (dayjs(latestDocCreatedAt).isAfter(firstTimeCreated)) {
    setFirstTimeCreated(latestDocCreatedAt);
  }
}, [data, firstTimeCreated]);

3. 确保Portal元素存在 #

检查UseToastComponent中portalId对应的DOM元素是否在组件渲染前就已存在，避免渲染Portal时找不到容器元素导致额外错误：

<!-- 在public/index.html中提前添加容器元素 -->
<div id="toast-portal"></div>

// UseToastComponent中确认loaded状态逻辑
const [loaded, setLoaded] = useState(false);

useEffect(() => {
  setLoaded(!!document.getElementById(portalId));
}, []);

内容的提问来源于stack exchange，提问作者Singh