React报错：渲染MessageController时无法更新App组件的解决方法

错误原因 #

这个报错的核心是：在MessageController的渲染阶段直接调用Redux的dispatch方法更新状态，该状态变化会触发父组件App重新渲染。React禁止在渲染某一组件的过程中更新其他组件的状态，这会导致渲染流程紊乱，触发不必要的重渲染循环。

修复方案 #

方案一：修改MessageController组件（推荐） #

将状态更新操作移到useEffect中执行，useEffect会在组件渲染完成后触发，不会干扰当前渲染流程：

import React, { useEffect } from 'react';
import { message } from 'antd';
import { useDispatch } from 'react-redux';
import { messageAction } from '../../store/message';

const MessageController = ({ messageData }) => {
  const dispatch = useDispatch();
  const { text, type } = messageData;

  useEffect(() => {
    // 显示全局消息
    const hideMessage = message[type](text, { maxCount: 1, duration: 2 });
    // 触发Redux状态更新，重置消息标记
    dispatch(messageAction.hideMessage());
    
    // 组件卸载时关闭消息，避免内存泄漏
    return () => hideMessage();
  }, [dispatch, messageData, text, type]);

  // Ant Design message是全局弹窗，无需渲染DOM元素
  return null;
};

export default MessageController;

方案二：移除MessageController，直接在App组件中处理 #

简化逻辑，直接在App组件的useEffect中完成消息显示和状态更新，不需要额外的控制器组件：

import React, { useEffect } from 'react';
import { message } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { messageAction } from '../../store/message';

const App = () => {
  const { isShowMessage, message: msgData } = useSelector((state) => state.appMessage);
  const dispatch = useDispatch();
  // 假设isLoggedIn、routeNames、privateRoutes、publicRoutes已定义

  useEffect(() => {
    if (isShowMessage && msgData) {
      message[msgData.type](msgData.text, { maxCount: 1, duration: 2 });
      dispatch(messageAction.hideMessage());
    }
  }, [isShowMessage, msgData, dispatch]);

  return (
    <>
      {isLoggedIn ? (
        <>
          <Switch>
              <Redirect exact from={routeNames.main} to={routeNames.events} />
              {privateRoutes.map((route) => (
                <Route key={route.path} {...route} />
              ))}
             <Redirect push to={routeNames.events} />
          </Switch>
        </>
      ) : (
        <Switch>
          {publicRoutes.map((route) => (
            <Route key={route.path} {...route} />
          ))}
          <Redirect push to={routeNames.login} />
        </>
      )}
    </>
  );
};

错误截图内容翻译 #

控制台报错原文翻译为：

无法在渲染另一个组件（MessageController）时更新组件（App）。为定位问题，请追踪触发App状态更新的setState()调用来源。

内容的提问来源于stack exchange，提问作者maks.ovv