时间戳

首页 > 解决方案 > 求教：最大更新深度超过的原因

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

问题描述

我是 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”会停止深度错误。

标签： javascriptreactjsgraphqlreact-hooksreact-apollo

解决方案

您会看到当这部分呈现时会发生什么

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

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

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

使用效果喜欢

  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} />

推荐阅读