無法對使用 HOOK 實現的未安裝組件執行 React state 更新

Question

我在 React 上有此代碼用於用戶身份驗證。 注意：在 EXPO 中運行。

function App(){
  const [user, setUser] = useState(null);

  if (user){  
      return <Dashboard user={user} />
    }
    return <Authentication login={user => setUser(user)}/>;


}
export default App;  

用戶登錄function：

  userLogin = (email, password) => {
    return new Promise(resolve => {
      firebase.auth().signInWithEmailAndPassword(email, password)
        .catch(error => {
          switch (error.code) {
            case 'auth/invalid-email':
              console.warn('Invalid email address format.');
              break;
            case 'auth/user-not-found':
            case 'auth/wrong-password':
              console.warn('Invalid email address or password');
              break;
            default:
              console.warn('Check your internet connection');
          }
          resolve(null);
        }).then(user => {
        if (user) {
          resolve(user);
        }
      });
    })
  };

成功登錄后，我會轉到儀表板，但我收到了此警告。 我試過使用 useEffect 但我仍然有同樣的警告。

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s, the componentWillUnmount method.

Answer 1

您必須在 promise 解析后調用login屬性，這里是最小示例

 const { useState } = React function Dashboard () { return <h1>Dashboard</h1> } function Authentication ({ login }) { const userLogin = (username, password) => { const query = new Promise((resolve) => { setTimeout(() => { resolve(true) }, 1000) }) query.then(login) } return ( <div> <h1>Authentication</h1> <button onClick={userLogin}>Login</button> </div> ) } function App(){ const [user, setUser] = useState(null); if (user){ return <Dashboard user={user} /> } return <Authentication login={user => setUser(user)}/> } ReactDOM.render(<App />, document.querySelector('#root'))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script> <div id="root"></div>