React报错：渲染组件时更新其他组件，求助问题原因与解决

问题背景 #

你遇到的错误提示：
Warning: Cannot update a component (ConnectedNavBar) while rendering a different component (ConnectedGraphs). To locate the bad setState() call inside ConnectedGraphs, follow the stack trace as described in

经排查，错误源于在setFilteredGraph的回调函数中执行dispatch(clearAnalyserData());，但同一个useEffect中外部的dispatch(clearAnalyserData());却能正常运行无报错。你想知道操作有误的地方，以及是否存在「不能在setFilteredGraph内部进行dispatch」的规则。

相关代码片段：

import {
  clearAnalyserData,
} from "../../redux/actions";


const [filteredGraph, setFilteredGraph] = useState("");

useEffect(() => {
  if (currentCam) {
  
    const filterCamera = () => {
     
      setFilteredGraph(
        _.isEqual(filteredGraph, { links: links, nodes: allNodes })
          ? () => {
              dispatch(clearAnalyserData());

              setGraphData("");

              return visualGraph.model;
            }
          : { links: links, nodes: allNodes }
      );

      dispatch(clearAnalyserData());
    };
  filterCamera() ;
  } else {
  ....
  }
}, [currentCam]);

错误原因 #

• setFilteredGraph的函数式更新回调会在React渲染阶段执行，而dispatch(clearAnalyserData())会触发Redux状态更新，导致依赖该状态的ConnectedNavBar组件重新渲染——这违反了React的核心规则：渲染阶段不能更新其他组件的状态。
• 而useEffect外部的dispatch是在渲染完成后的副作用阶段运行的，这个阶段允许执行状态更新、dispatch这类副作用操作，所以不会触发警告。

关于「setFilteredGraph内部能否dispatch」的说明 #

不存在绝对的禁止规则，但要注意执行时机：setFilteredGraph的函数式回调是用来计算新状态的，属于渲染阶段的逻辑，只能做纯计算，不能包含副作用（比如dispatch、调用其他setState）。如果要执行副作用，必须放到渲染完成后的阶段（比如useEffect、事件回调里）。

修复方案 #

把dispatch和setGraphData这类副作用操作移出setFilteredGraph的回调，调整逻辑顺序：

import {
  clearAnalyserData,
} from "../../redux/actions";


const [filteredGraph, setFilteredGraph] = useState("");

useEffect(() => {
  if (currentCam) {
  
    const filterCamera = () => {
      const isEqual = _.isEqual(filteredGraph, { links: links, nodes: allNodes });
      
      if (isEqual) {
        // 先执行副作用
        dispatch(clearAnalyserData());
        setGraphData("");
        // 再更新filteredGraph状态
        setFilteredGraph(visualGraph.model);
      } else {
        setFilteredGraph({ links: links, nodes: allNodes });
        dispatch(clearAnalyserData());
      }
    };
    filterCamera();
  } else {
    // ...其他逻辑
  }
}, [currentCam]);

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