代码之家 › 专栏 › 技术社区 › Olga Nosova

RTK查询。在组件负载上使用变异导致无限循环

rtk-query redux-toolkit reactjs javascript

Olga Nosova · 技术社区 · 11 月前

我忘记了如何使用React Redux,但现在我在一个项目上工作,我们正在引入Redux,我试图通过现代的Redux Toolkit(RTK)查询机制实现服务器调用。问题是,我必须在组件渲染时执行一次POST请求,而不是在按钮点击时,在所有示例中都是这样。

我这样做:

import { useRef } from "react";
import { useMyPostMutation } from "src/api/apiSlice";

function AppMain() {  
  const [myPost, { isLoading, isError }] = useMyPostMutation();

  var temp = addNewDisplay(labelOfDisplay).unwrap();

  return (
    <main>
      ...
    </main>
  );
}

export { AppMain };

我得到了一个错误:

重新渲染的次数过多。React限制了渲染的数量,以防止无限循环。
在renderWithHooks

如果我创建一个按钮并在按下时调用突变,这是可行的,但这不是我需要的。我如何以这种方式使用突变?

如果我把它放进去,它也会起作用 useEffect ,但它本身就是一个钩子。我需要换一个钩子吗?

1 回复 | 直到 11 月前

Drew Reese 11 月前

假设 addNewDisplay 事实上 应该是 myPost 触发函数,那么问题是触发函数的无条件调度。组件渲染并分派触发器函数,该函数触发组件使用更新的端点/变异数据重新渲染,然后再次调用变异触发器函数,从而创建您看到的渲染循环问题。

触发器函数用于响应事件,例如单击按钮或安装组件。将触发器函数调用移动到 useEffect 具有适当依赖关系的钩子调用。

例子:

import { useMyPostMutation } from "src/api/apiSlice";

function AppMain() {  
  const [myPost, { isLoading, isError }] = useMyPostMutation();

  useEffect(() => {
    myPost(somePayload).unwrap()
      .then(responseValue => {
        ....
      })
      .catch(error => {
        ...
      });
  }, [somePayload]);

  return (
    <main>
      ...
    </main>
  );
}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前