从 firebase 获取数据并将其转发到另一个组件会转发一个空数组

Question

我正在使用数组和

useState()

从 firebase 数据库中获取数据。该数组最初是空的。但是，当我在初始加载后从 firebase 收到数据并尝试使用 props 将数据转发到其他组件以进行渲染后，初始空数组将被转发。我使用

useEffect()

和

loading

(

from useAuthState()

) 在 Firebase 加载完成后获取数据。

这是我的代码

User Component

import { useEffect, useState } from "react";
import { auth, db } from "../firebaseConfig";
import { useNavigate } from "react-router-dom";
import { useAuthState } from "react-firebase-hooks/auth";
import { CircularProgress } from "@mui/material";
import UserDataTable from "../Components/User-data-table/UserDataTable";

function User() {
  const [userData, setUserData] = useState([]);

  const [user, loading] = useAuthState(auth);
  const navigate = useNavigate();

  const fetchUserData = () => {
    const resultsReference = db.collection("Results");
    const { uid } = auth.currentUser;

    let tempData = [];

    resultsReference
      .where("userId", "==", uid)
      .get()
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          tempData.push({ ...doc.data() });
        });
        setUserData(tempData);
      });
  };

  const effectFunction = async () => {
    if (loading) {
      return <CircularProgress />;
    }
  };

  useEffect(() => {
    if (!loading) {
      fetchUserData();
    }

    if (!loading && !user) {
      navigate("/");
    }

    effectFunction();
  }, [loading]);

  return (
    <div>
      <UserDataTable userData={userData} />
    </div>
  );
}

export default User;

UserDataTable Component

import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from "@mui/material";
import "./UserDataTable.scss";
import { useMyTheme } from "../../Context/ThemeContext";

function UserDataTable({ userData }) {
  const { theme } = useMyTheme();

  const tableStyles = {
    color: theme.textColor,
    fontFamily: ["Kode Mono", "monospace"].join(","),
    textAlign: "center",
    fontSize: "2rem",
  };

  return (
    <div className="user-table">
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell style={tableStyles}>WPM</TableCell>
              <TableCell style={tableStyles}>Raw WPM</TableCell>
              <TableCell style={tableStyles}>Accuracy</TableCell>
              <TableCell style={tableStyles}>Characters</TableCell>
              <TableCell style={tableStyles}>Date</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {userData.map((d) => { **// Since the prop is empty i am unable to render it here !**
              <TableRow>
                <TableCell>{d.wpm}</TableCell>
                <TableCell>{d.rawWpm}</TableCell>
                <TableCell>{d.accuracy}</TableCell>
                <TableCell>0|0|0|0</TableCell>
                <TableCell>{d.timeStamp.toDate().toLocaleString()}</TableCell>
              </TableRow>;
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

export default UserDataTable;

我认为使用 useEffect() 时这可能是一个问题，因为当组件重新加载时，空数组将被转发到下一个组件。我是新手，正在学习教程，但是讲师没有遇到这个问题。请帮忙

我还认为数据正在转发到下一个组件。但该组件首先处理空数组，然后不再处理非空数组。我该如何解决这个问题。

合并数据时，首先观察空数组，然后观察填充数组：

Answer 1

由于您在此处将状态初始化为空数组

const [userData, setUserData] = useState([]);

，因此这将是渲染

UserDataTable

的初始状态。

您的

UserDataTable

代码需要处理该初始状态，或者您的

User

只需在数据加载后渲染

UserDataTable

组件。