javascript - ReactJS 警告 "Can' t 在 .then 处理程序中返回 Firebase promise 时对未安装的组件执行 react 状态更新

Question

我想在注册表单中创建用户后将用户保存到 Firebase 的实时数据库中。如果我在 .then 处理程序中返回 Firebase 函数(值)以保存用户，而不是仅仅调用它(没有 return 语句)，我会收到来自 React 的错误消息，说“无法对 an 执行 react 状态更新未安装的组件”。

我的注册表单提交处理程序代码如下所示:

 const SignUpFormBase = (props) => {
   const [credentials, setCredentials] = useState(INITIAL_STATE);
   const [error, setError] = useState(null);

   [some other code]

   const handleSubmit = (e) => {
        firebase
            .doCreateUserWithEmailAndPassword(email, passwordOne)
            .then(authUser => {

                // create a user in the Firebase realtime database
                return firebase.database().ref(`users/${authUser.user.uid}`)
                       .set({ username, email });

            })
            .then(() => {
                setCredentials(INITIAL_STATE);
                props.history.push(ROUTES.DASHBOARD);
            })
            .catch(error => {
                setError(error);
            });

        e.preventDefault();
    };

  return (
    [some jsx]
  );
 };

const SignUpForm = withRouter(SignUpFormBase);

export default SignUpForm;

无论您包含还是省略 return 语句，代码都可以正常工作。但是，如果您不使用 return 语句，则不会显示警告。

我只是不明白为什么我会收到来自 firebase 的上述警告，因为我(似乎)在组件卸载后没有对其执行任何状态更新。

更新:

组件实际上在 setCredentials Hook 有机会更新状态之前卸载。这不是因为在上面的代码中推送到历史记录，而是因为我已经实现了一个公共(public)路由来只向用户显示他们被允许查看的页面。它使用新的 useContext Hook ，当上下文值更改时触发重新渲染(该值来自订阅 firebase onAuthStateChanged 方法)。我通过将 setCredentials 调用放入 useEffect Hook 中解决了这个问题:

useEffect(() => {
    // set credentials to INITIAL_STATE before ComponentDiDUnmount Lifecycle Event
    return () => {
        setCredentials(INITIAL_STATE);
    };
}, []);

但是，我仍然不明白为什么缺少 return 语句(在之前的设置中)会导致消失的 react 警告。

Answer 1

从给定的代码来看，我不确定是哪一部分导致了警告。但是，我想提供一些建议来帮助确定它(很难在评论中写清楚，所以我只是作为答案发布)。

firebasePromise
    .then(() => {
        // [1] async code
        setCredentials(INITIAL_STATE);

        // [2] sync code
        // UNMOUNT happens after route change
        props.history.push(ROUTES.DASHBOARD); 
    })
    .catch(error => {
        // [3] async code
        setError(error);
    });

我怀疑问题出在同步/异步代码的执行顺序上。您可以尝试两件事来获取更多信息。

1. 检查 [3] 是否被调用，也许使用 console.log？
2. 将 [2] 包装在 setTimeout(() => {}) 中以使其也异步。

我的赌注是 [3]。调用 [2] 后以某种方式抛出一些错误。