用户没有被正确传递给 React 中的另一个组件

Question

我在构建的 React 应用程序中遇到问题，这似乎是因为用户属性未正确传递？我是一个新手反应开发所以对我放轻松 :3

这些是文件： Mainpage.js

import React, { useState, useEffect } from 'react';
import { Container, Typography, Button } from '@mui/material';
import { doc, getDoc } from 'firebase/firestore';
import { onAuthStateChanged, signOut } from 'firebase/auth';
import { auth, db } from '../firebase';
import { Link, useNavigate } from 'react-router-dom'; // Import useNavigate

const MainPage = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  const navigate = useNavigate(); // Add this line

  const goToSalesDashboard = () => {
    navigate('/sales-dashboard', { state: { user } });
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      console.log('Current User:', currentUser);
      if (currentUser) {
        const userDocRef = doc(db, 'users', currentUser.uid);
        const userDocSnap = await getDoc(userDocRef);

        if (userDocSnap.exists()) {
          const userData = userDocSnap.data();
          setUser(userData);
          console.log('User data:', userData);
        } else {
          console.error('User not found in Firestore');
        }
      } else {
        setUser(null);
      }
      setLoading(false);
    });

    return () => {
      unsubscribe();
    };
  }, []);

  const handleLogout = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.error('Error logging out:', error);
    }
  };

  if (loading) {
    return <Typography>Loading...</Typography>;
  }

  if (!user) {
    return <Typography>No user data found</Typography>;
  }

  return (
    <Container>
      <Typography>Name: {user.name}</Typography>
      <Typography>Role: {user.role}</Typography>
      <Typography>Company: {user.company}</Typography>
      {user.dateCreated && (
        <Typography>Date Created: {user.dateCreated.toDate().toLocaleDateString()}</Typography>
      )}
      <Button
        variant="contained"
        color="secondary"
        onClick={handleLogout}
        style={{ marginTop: '1rem' }}
      >
        Logout
      </Button>
      {user && (
        <Button
          variant="contained"
          color="primary"
          onClick={goToSalesDashboard} // Call the goToSalesDashboard function
          style={{ marginTop: '1rem', marginLeft: '1rem' }}
        >
          Go to Sales Dashboard
        </Button>
      )}
    </Container>
  );
};

export default MainPage;

销售 Dashboard.js：

import React from 'react';
import { Container, Button, Typography } from '@mui/material';
import { Link, useLocation, Navigate } from 'react-router-dom';

const SalesDashboard = () => {
  const location = useLocation();
  const { user, handleLogout } = location.state || {};

  if (!user || !handleLogout) {
    // Redirect to the main page if user or handleLogout is not available
    alert(user, handleLogout, location.state);
    return <Navigate to="/" />;
  }

    return (
        <Container>
            <Typography variant="h4" gutterBottom>
                Sales Dashboard
            </Typography>
            <div>
                <Button component={Link} to="/sales-dashboard/add-product" variant="contained" color="primary">
                    Añadir producto
                </Button>
                <Button variant="contained" color="primary">
                    Ingresar Venta
                </Button>
                <Button variant="contained" color="primary">
                    Consultar Puntos
                </Button>
                <Link
                    to={{
                        pathname: '/sales-dashboard/view-products',
                        state: { user },
                    }}
                >
                    <Button variant="contained" color="primary">
                        Ver Inventario
                    </Button>
                </Link>
            </div>
           
        </Container>

    );
};

export default SalesDashboard;

这里一定有我遗漏的东西。当我按下转到销售仪表板时，它会循环。这意味着两个对象之一不存在。所以它被创建为一个空白对象以避免错误。现在，警报抛出 {object, object} 这意味着它们都不存在。