React Native-[未处理的承诺被拒绝:错误:注册错误] [英] React Native - [Unhandled promise rejection: Error: Signup Error]

问题描述

我收到此故意错误，因为我使用同一封电子邮件进行注册.它说我没有处理拒绝；有人可以解释为什么原因，因为我有一个.catch()可以捕获引发的任何错误

I get this intentional error because I'm using the same email to register. It says I'm not handling the rejection; can someone explain why because I have a .catch() which should catch any errors that were thrown

错误代码:

[Unhandled promise rejection: Error: Signup Error]
- node_modules\promise\setimmediate\core.js:37:14 in tryCallOne
- node_modules\promise\setimmediate\core.js:123:25 in setImmediate$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:146:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:194:17 in _callImmediatesPass
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:458:30 in callImmediates
* [native code]:null in callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:407:6 in __callImmediates
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:143:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:142:17 in __guard$argument_0
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

从此 fetch().then().catch()代码中

:

 fetch(
      "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[ API KEY ]",
      {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, returnSecureToken: true }),
      }
    )
      .then((res) => {
        if (!res.ok) {
          throw new Error("Signup Error");
        } else {
          const resData = res.json();
          return resData;
        }
      })
      .then((resData) => {
        console.log({ resData });
        dispatch({ type: SIGNUP });
      })
      .catch((err) => {
        console.log({ errHere: err });
        throw err;
      });

有效的 try {} catch(){} 代码:

try {
      const res = await fetch(
        "https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[ API KEY ]",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email, password, returnSecureToken: true }),
        }
      );

      if (!res.ok) {
        throw new Error("Signup Error");
      }

      const resData = await res.json();

      console.log({ resData });
    } catch (err) {
      throw err;
    }

我已经使用 try catch 重做了此代码，它可以工作，但这使我感到困惑，所以我需要知道为什么它不适用于 .then().catch()处理程序

I've redone this code with try catch and it works but this puzzles me, so I need to know why it doesn't work with the .then().catch() handlers

React代码是这样的:

The React code is this:

const signupHandler = useCallback(async () => {
    console.log(formState.inputValues.email, formState.inputValues.password);
    dispatch(
      signup(formState.inputValues.email, formState.inputValues.password)
    )
      .then(() => {
        console.log("OK!");
      })
      .catch((err) => {
        console.log({ errOutside: err });
      });
  }, [dispatch]);

并且正如我所说的，它可以与 try catch 方法一起使用.

and as I said it works with the try catch method.

推荐答案

dispatch是redux中的同步方法，在 try catch 中，您使用了 async await 是异步的您可以做的就是向您的redux存储中添加一个异步调度中间件

dispatch is a synchronous method in redux and in try catch you used async await which is asynchronous what you can do is adding a asynchronous dispatch middleware to your redux store

const asyncDispatchMiddleware = (store) => (next) => (action) => {
  let syncActivityFinished = false;
  let actionQueue = [];

  function flushQueue() {
    actionQueue.forEach((a) => store.dispatch(a)); // flush queue
    actionQueue = [];
  }

  function asyncDispatch(asyncAction) {
    actionQueue = actionQueue.concat([asyncAction]);

    if (syncActivityFinished) {
      flushQueue();
    }
  }

  const actionWithAsyncDispatch = Object.assign({}, action, { asyncDispatch });

  next(actionWithAsyncDispatch);
  syncActivityFinished = true;
  flushQueue();
};

现在您可以在Promise方案中使用 asyncDispatch 方法

now you can make in promise scheme the asyncDispatch method

这篇关于React Native-[未处理的承诺被拒绝:错误:注册错误]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！