我使用RTK查询来获取数据,在其中一个用例中遇到了一个小问题.

我使用一种Mutations 来验证应用程序用户的邮箱地址,如下所示:

// ...imports

const ConfirmEmail = () => {
  const [params] = useSearchParams();

  const [confirmEmail, { isLoading, isSuccess, isUninitialized, error }] =
    useConfirmEmailMutation();

  useEffect(() => {
    if (isUninitialized) {
      confirmEmail({
        email: params.get('email'), // from the verification link
        code: params.get('code'), // from the verification link
      })
        .unwrap()
        .then(() => {
            // handling success...
        })
        .catch((e) => {
            // handling error...
        });
    }
  });

  // ...other component code
}

问题是,对于StrictMode,Mutations 在开发中运行两次,并且它在API端导致并发错误.我在开发工具中看到两个网络请求,一个是成功的,另一个是不成功的,根据哪个先运行,组件会显示不一致的结果.

我知道这只会发生during development,我试着遵循说明in the official react documentation,我试着使用fixedCacheKey,就像所描述的here,但我不能使用RTK查询,所以我得到了一致的结果during development.

有什么办法吗,还是我错过了什么?


Edit:我的问题与this question属于同一类别,但它更具体地针对RTK查询.因为在RTK查询中,如果组件试图进行与现有组件相同的查询,则不会执行任何请求(如前面提到的here).然而,我试图做的是一种Mutations ,以确认用户的邮箱地址(在点击通过邮箱发送的链接后).Mutations 并不遵循前面提到的here号规则.

useEffect清理功能没有帮助,这不像buying a product个例子.

根据下面的讨论,可用的选项是:

  1. 使用查询而不是Mutations .但这不会是语义上的 对,是这样.
  2. 强制用户再次点击某个按钮以启动"确认邮箱"Mutations .这是重复的,而且对用户不友好.
  3. 使用ref来跟踪Mutations 是否已经在运行.这是我在最后实现的,如下所示:
// ...imports

const ConfirmEmail = () => {
  const verifiying = useRef(false);

  const [params] = useSearchParams();

  const [confirmEmail, { isLoading, isSuccess, isUninitialized, error }] =
    useConfirmEmailMutation();

  useEffect(() => {
    const isVerifying = verifiying.current;

    if (isUninitialized) {
      verifiying.current = true;

      confirmEmail({
        email: params.get('email'), // from the verification link
        code: params.get('code'), // from the verification link
      })
        .unwrap()
        .then(() => {
            // handling success...
        })
        .catch((e) => {
            // handling error...
        });
    }
  });

  // ...other component code
}

推荐答案

不过,这几乎就是这种严格性判断的目的:向您显示您正在自动执行有问题的API调用.

In the future, React can choose to execute a useEffect with an empty dependency array on more occasions than just on first mount - for example in combination with the offscreen features they are working on.
This just tells you in advance that you are doing this in probably a dangerous place.

您是否可以将此API调用整合到某种实际的用户交互中,比如点击按钮?往前看,这会安全得多.

Reactjs相关问答推荐

LocalStore未存储正确的数据

下拉Tailwind CSS菜单与怪异beviour

如何在react 流中使用文本区域和改变 node 的输入大小?

有没有办法将在服务器端全局获取的一些数据传递到Next&>13应用程序目录中的客户端组件?

React,React Router,Joy UI:如何在导航离开和返回后禁用snackbar重新出现?

react -无法获取函数的最新参数值

在 React 中,为什么不将组件和钩子结合起来呢?

如果我使用 formik,如何在嵌套对象中写入正确的值?

React-router-dom的链接不改变路由(ReactRouter6)

如何在 React Native 中更新跨屏幕呈现的上下文状态变量?

Redux,状态未定义

未捕获的类型错误:useSelector 不是函数

React JS:如何判断用户使用的是浏览器 url 还是桌面 electron

更新和删除功能不工作 Asp.net MVC React

从一个获取 axios 请求(ReactJS)中删除默认参数

如何使用react 路由将 url 参数限制为一组特定的值?

react-markdown 不渲染 Markdown

react 页面更新

如何在 Reactjs 中判断受保护路由上的用户角色?

你如何使用 refs 访问 React 中映射子项的值?