Javascript React rebuild c不会触发rerender

我重构了您的组件，以便更好地处理异步身份验证流.

import React, { useState, useEffect } from 'react';

const AUTH_DISABLED = 0;
const AUTH_LOGIN = 1;
const AUTH_LOGOUT = 2;

function App() {
  const [showLoginPopup, setShowLoginPopup] = useState(false);
  const [authButtonState, setAuthButtonState] = useState(AUTH_DISABLED);

  useEffect(() => {
    // This effect runs only once after the component mounts
    authGlobal.tryAuthentication().then((loggedIn) => {
      setAuthButtonState(loggedIn ? AUTH_LOGOUT : AUTH_LOGIN);
    });
  }, []); // Empty dependency array means it runs once after mount

  const handleClick = () => {
    if (authButtonState === AUTH_LOGOUT) {
      authGlobal.logout().then(() => {
        setAuthButtonState(AUTH_LOGIN);
        setShowLoginPopup(false); // Hide popup on logout
      });
    } else {
      setShowLoginPopup(true);
    }
  };

  return (
    <div className="main-container">
      <div>Display</div>
      <div className="main-controls">
        <button 
          type="button" 
          onClick={handleClick} 
          disabled={authButtonState === AUTH_DISABLED}
        >
          Log {authButtonState === AUTH_LOGOUT ? "Out" : "In"}
        </button>
        {showLoginPopup && <LoginPopup />}
      </div>
    </div>
  );
}

因此，总而言之，虽然Then()看起来应该用不带useEffect的新状态排队另一个重新呈现，但实际上，您的try Authentication函数的异步性质和Reaction批处理状态更新的方式可能会导致您观察到的问题.使用useEffect提供了一种更可控、更可预测的方式来处理功能组件中的副作用和异步操作.