Question

尝试使用react钩子重写此方法：

this.setState({
      isPerformingAuthAction: true
    }, () => {
      auth.signInWithEmailAndPassword(emailAddress, password).then((value) => {
        this.closeSignInDialog(() => {
          const user = value.user;
          const displayName = user.displayName;
          const emailAddress = user.email;

          this.openSnackbar(`Signed in as ${displayName || emailAddress}`);
        });
      }).catch((reason) => {
        const code = reason.code;
        const message = reason.message;

        switch (code) {
          case 'auth/invalid-email':
          case 'auth/user-disabled':
          case 'auth/user-not-found':
          case 'auth/wrong-password':
            this.openSnackbar(message);
            return;

          default:
            this.openSnackbar(message);
            return;
        }
      }).finally(() => {
        this.setState({
          isPerformingAuthAction: false
        });
      });
    });

isPerformingAuthAction是一个组件属性，在执行各种操作时会禁用按钮。

<Button disabled={state.isPerformingAuthAction} ... />

问题：我正在使用useReducer来管理本地状态，而isPerformingAuthAction是reducerState的属性。 useReducer不返回承诺，所以我不能这样做：

dispatch({type:"isPerformingAuthAction", payload: true}).then(auth.stuff)

我考虑过改用useState，但它没有像this.setState这样的类具有回调。

我一直在尝试着围绕获取数据和异步的一些useEffect方式。我对此很困惑，但是我认为我可以将“ isPerformingAuthAction”或化简器中的状态作为依赖项，并在更改时使用useEffect更新该组件，但是“ isPerformingAuthAction”属性也由于其他原因而更改，而不仅仅是auth.signInWithEmailAndPassword(emailAddress, password)，但需要注册，退出和其他一些功能。

因此，当“ isPerformingAuthAction”更改为true时，它将禁用按钮，因此用户被迫等待服务器的响应。我想确保在调用auth.whatever之前禁用那些按钮（状态更新/组件重新显示为灰色按钮）。

在useReducer调度更改本地状态后获取数据

0 个答案: