React页面如何在useEffect执行后重新渲染？

Hey there! Let's get your Dashboard to re-render once the googleCheckLogIn action finishes up. The core issue right now is that your component isn't "watching" the state that gets updated by that action—React only re-renders components when their props or subscribed state changes. Here's how to fix it:

Step 1: Subscribe to the Updated State with useSelector #

First, you need to pull the state that googleCheckLogIn modifies from your Redux store using useSelector. This tells React to monitor that value, and trigger a re-render whenever it changes.

For example, if your action updates an auth.isLoggedIn flag in the store, add this line to your component:

const userAuthStatus = useSelector(state => state.auth.isLoggedIn); // Adjust the path to match your actual state structure

Step 2: Handle Async Actions (If Applicable) #

If googleCheckLogIn is an asynchronous action (like using Redux Thunk), wrap the dispatch in an async function inside useEffect to ensure the state update completes before the component reacts:

useEffect(() => { 
  const checkUserLogin = async () => {
    await dispatch(googleCheckLogIn());
    // Add any post-action logic here if needed
  };
  checkUserLogin();
}, [dispatch]); // Dispatch is stable in Redux, so it's safe to add to dependencies

Step 3: Use the Subscribed State in Your Component #

To trigger the re-render, you need to actually use the subscribed state in your component's output. This could be conditional rendering, displaying user info, or even just a subtle reference (though purposeful usage is better practice).

Modified Full Code Example #

import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom'; // If using React Router

export default function Dashboard() { 
  const dispatch = useDispatch(); 
  const history = useHistory();
  // Subscribe to the state updated by googleCheckLogIn
  const userAuthStatus = useSelector(state => state.auth.isLoggedIn); // Update to your actual state path

  useEffect(() => { 
    const checkLoginStatus = async () => {
      await dispatch(googleCheckLogIn());
    };
    checkLoginStatus();
  }, [dispatch]); 

  function handleClickSum() { 
    history.push('/pesquisarAulas'); 
  } 

  // Optional: Show loading state while checking login
  if (userAuthStatus === 'loading') {
    return <div>Verifying your session...</div>;
  }

  return ( 
    <Container> 
      <Content> 
        <MainOverview> 
          <OverviewCard onClick={handleClickSum}> 
            <div className="overviewcard__icon"> 
              <FaPen size="30" id="penIcon" /> 
            </div> 
            <div className="overviewcard__info"> 
              <span>Lançar Sumário</span> 
            </div> 
          </OverviewCard> 
          <OverviewCard> 
            <div className="overviewcard__icon"> 
              <AiFillCalculator size="30" id="calculatorIcon" /> 
            </div> 
            <div className="overviewcard__info"> 
              <span>Lançar Nota</span> 
            </div> 
          </OverviewCard> 
          <OverviewCard> 
            <div className="overviewcard__icon"> 
              <FaBook size="30" id="bookIcon" /> 
            </div> 
            <div className="overviewcard__info"> 
              <span>Unidades Curriculares</span> 
            </div> 
          </OverviewCard> 
          <OverviewCard> 
            <div className="overviewcard__icon"> 
              <BsCardChecklist size="30" id="cardCheckIcon" /> 
            </div> 
            <div className="overviewcard__info"> 
              <span>Marcar Presença</span> 
            </div> 
          </OverviewCard> 
        </MainOverview> 
        {/* Example: Show content based on auth status */}
        {userAuthStatus && <p>Bem-vindo de volta!</p>}
      </Content> 
    </Container> 
  ); 
}

Quick Verification Tips #

• Use Redux DevTools to confirm that googleCheckLogIn is actually updating the state in your store. If the state doesn't change, the component won't re-render.
• Double-check that your useSelector path exactly matches where the updated state lives in your Redux store. A wrong path means you won't catch the state change.

内容的提问来源于stack exchange，提问作者Ruben Martins