redux 无法在呈现其他组件时更新组件,若要查找内部的错误setState()调用,请按照中所述执行堆栈跟踪

qqrboqgw  于 2022-11-12  发布在  其他
关注(0)|答案(2)|浏览(164)

通过编码学习React,我有这个错误,这是因为'dispatch(clearAnalyserData());'在' setFilteredGraphData '内部,在同一个useEffect中,我使用了'clearAnalyserData'两次,但是第二次使用的时候工作正常,没有出现错误。我做错了什么,是不是有什么规则禁止在'setFilteredGraphData'内部调度?
Warning: Cannot update a component (已连接导航栏) while rendering a different component (已连接图表). To locate the bad setState() call inside已连接图表, follow the stack trace as described in

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]);
cqoc49vn

cqoc49vn1#

在一个状态的更新函数中更改其他状态可能会导致类似这样的错误。
删除一些意大利面条应该可以解决此问题:

const filterCamera = () => {
  if (_.isEqual(filteredGraph, { links: links, nodes: allNodes })) {
    setGraphData("");
    setFilteredGraph(visualGraph.model)
  } else {
    setFilteredGraph({ links: links, nodes: allNodes })
  }
  dispatch(clearAnalyserData());
};
4uqofj5v

4uqofj5v2#

当使用状态的先前值更新状态时,应使用状态设置器的回调参数,因为状态更新可能是异步的。
在类组件中,filterCamera可以写为:

filterCamera=()=> { 
    this.setState((state)=> {
        var equal = _.isEqual(filteredGraph, { links: links, nodes: allNodes });
        if(equal) { // can be rewritten using ternary operator
            return {graphData:'', filteredGraph: visualGraph.model };
        } else {
            return {filteredGraph: {links, nodes: allNodes}};
        }
    })
    dispatch(clearAnalyserData());
};

在类组件中,不会出现在另一个状态属性内更新状态属性的问题。

相关问题