apolloprovider的USEMUNTONMONTONS LOSS SONSUTION，导致反应的解决方案限制了防止无限循环的渲染数量

发布于 2025-02-13 14:08:47 字数 1309 浏览 1 评论 0原文

在异步等待呼叫呼叫的按钮上，请使用Apolloprovider上下文：

await showDialog(renderProps => (
                                    <ApolloProvider>
...
                                    </ApolloProvider>
                                ));

我需要通过USEMONTANT执行GQL突变：

const [promiseObj, { loading, error, data }] = useMutation(MUTATION);

promiseObj().then(result => {
    console.log(result.data);
    return (<React.Fragment>UI element</React.Fragment>)
});

在控制台中，我看到结果数据无限记录。

我需要的是，当承诺解决时，将对话框作为UI元素返回，但由于无限的呼叫renderwithhooks，这并没有发生。

看起来这个无限的循环是由React重新呈现组件引起的，但它永远不会结束。我该如何阻止这种情况发生？

错误是：

library.js:1310101 Uncaught (in promise) Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at renderWithHooks (library.js:1310101:17)
at mountIndeterminateComponent (library.js:1312915:13)
at beginWork (library.js:1314153:16)
at HTMLUnknownElement.callCallback (library.js:1299049:14)
at Object.invokeGuardedCallbackDev (library.js:1299098:16)
at invokeGuardedCallback (library.js:1299160:31)
at beginWork$1 (library.js:1319063:7)
at performUnitOfWork (library.js:1317878:12)
at workLoopSync (library.js:1317806:5)
at renderRootSync (library.js:1317769:7)

原文

In an async await call on a button onClick with ApolloProvider context:

await showDialog(renderProps => (
                                    <ApolloProvider>
...
                                    </ApolloProvider>
                                ));

I need to execute a GQL mutation via useMutation:

const [promiseObj, { loading, error, data }] = useMutation(MUTATION);

promiseObj().then(result => {
    console.log(result.data);
    return (<React.Fragment>UI element</React.Fragment>)
});

In the console I see the result data logged infinitely.

What I need is to return a dialog as a UI element when the promise resolves but that doesn't happen due to infinite calls to renderWithHooks.

It looks like this infinite loop is caused by React re-rendering the components, but it never ends. How can I stop this from happening?

The error is:

library.js:1310101 Uncaught (in promise) Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at renderWithHooks (library.js:1310101:17)
at mountIndeterminateComponent (library.js:1312915:13)
at beginWork (library.js:1314153:16)
at HTMLUnknownElement.callCallback (library.js:1299049:14)
at Object.invokeGuardedCallbackDev (library.js:1299098:16)
at invokeGuardedCallback (library.js:1299160:31)
at beginWork$1 (library.js:1319063:7)
at performUnitOfWork (library.js:1317878:12)
at workLoopSync (library.js:1317806:5)
at renderRootSync (library.js:1317769:7)

分享到QQ

分享到微博