主页 / coding / 问题 / 79318472
Accepted
Bruno Nobre
Asked: 2024-12-31 03:42:06 +0800 CST

如何让组件只安装一次？

  • 772

我有两个组件 Auth 和 Main，分别代表应用的登录屏幕和主屏幕。这两个组件均由组件 AuthOrApp 调用，组件根据用户的状态 ID 选择显示哪一个。

//component AuthOrApp

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

import { login } from '../store/userSlice';
import { addShops } from '../store/shopsSlice';
import Auth from '../screens/Auth';
import Main from '../navigators/Main';
import { getData } from '../common';

export default props => {
    const [start, setStart] = useState(true);
    const dispatch = useDispatch();
    const user = useSelector(state => state.user);

    const fetchData = async () => {
        if (!user.id) {
            const userData = await getData();
            if (userData.id) {
                dispatch(addShops(userData.filterShops));
                dispatch(login({ name: userData.name, id: userData.id }));
            } else {
                setStart(false);
            }
        } else {
            setStart(false);
        }
    }

    useEffect(() => {
        fetchData();
    }, [user])

    return (!user.id) ? <Auth /> : <Main />;
}

退出时，用户状态id被清除，应用返回登录界面，问题在于它再次挂载了Auth和Main组件。

我不明白为什么它会重新组装组件而不是直接渲染。有人能给我解释一下吗？我该如何阻止它再次安装？

javascript

1 个回答

  1. Best Answer

    1. 渲染两者，切换可见性

    function AuthOrApp() {
  const user = useSelector(state => state.user);

  return (
    <>
      <Auth style={{ display: !user.id ? 'block' : 'none' }} />
      <Main style={{ display: user.id ? 'block' : 'none' }} />
    </>
  );
}

    1.使用 React Router

    npm install react-router-dom



// App.js or a central routing component
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';

import Auth from './screens/Auth';
import Main from './navigators/Main';

const App = () => {
  const user = useSelector(state => state.user);

  return (
    <Router>
      <Routes>
        <Route 
          path="/login" 
          element={!user.id ? <Auth /> : <Navigate to="/main" />} 
        />
        <Route 
          path="/main" 
          element={user.id ? <Main /> : <Navigate to="/login" />} 
        />
        {/* Redirect any unknown routes */}
        <Route 
          path="*" 
          element={<Navigate to={user.id ? "/main" : "/login"} />} 
        />
      </Routes>
    </Router>
  );
}

export default App;



// In your logout function/component
import { useDispatch } from 'react-redux';
import { logout } from '../store/userSlice';
import { useNavigate } from 'react-router-dom';

const LogoutButton = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleLogout = () => {
    dispatch(logout()); // Clears user.id
    navigate('/login'); // Redirects to login
  };

  return <button onClick={handleLogout}>Logout</button>;
};

    如果您希望在组件卸载时仍保留其状态（例如，用户在 Auth 屏幕上部分填写了表单，但不想在离开时丢失该信息），则可以使用 Redux 或 React 的 Context API 全局管理状态。

    • 2

相关问题