寻求建议:最大更新深度超过的原因

Question

我是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;

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

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

Answer 1

您可以看到当这个部分渲染时会发生什么

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

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

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

使用类似的效果

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