求教：最大更新深度超过的原因

Posted 2023-03-08

【中文标题】求教：最大更新深度超过的原因

【英文标题】：Seeking advice: Reason for maximum update depth exceed

【发布时间】：2020-06-07 21:35:29

【问题描述】：

我是 React 和 GraphQL 的新手。尝试使用 GraphQL 订阅源更新 React 状态，但会产生更新深度错误。

这里是简化的代码：

import  Subscription  from 'react-apollo';
...

function Comp() 
  const [test, setTest] = useState([]);

  const Sub = function() 
    return (
      <Subscription subscription=someStatement>
        
          result => setTest(...test, result.data);
          return null;
        
      </Subscription> 
    );
  ;

  const Draw = function() 
    return ( 
      <div>  test.map(x => <p>x</p>)  </div> 
    );
  ;

  return (
    <div>
      <Sub />
      <Draw />
    <div/>
  );
;
export default Comp;

常规查询在应用程序中运行良好，并且订阅标签返回可用的结果，所以我认为问题出在 React 方面。

我假设显示的代码包含错误源，因为注释掉函数“Sub”会停止深度错误。

【参考方案1】：

你看这部分渲染时会发生什么

    <Subscription subscription=someStatement>
        
          result => setTest(...test, result.data);
          return null;
        
      </Subscription> 

setTest() 被调用并设置了导致重新渲染的状态，重新渲染导致上面的块到re-render 和setTest() 被再次调用并且循环继续。

尝试在您的useEffect() Hook 中获取和setTest()，这样它就不会卡在重新渲染循环中。

useEffect like

  useEffect(() => 
           //idk where result obj are you getting from but it is supposed to be 
           //like this
      setTest(...test, result.data);
  , [test] )

组件喜欢

 <Subscription subscription=someStatement />

【讨论】：

试一试 (codepen.io/danninemx/pen/jOPyYMX?editors=0010) 但似乎我没有正确使用 useEffect。你能详细说明一下吗？

告诉我你从哪里得到result ，我会为你制作一个代码sn-p。