在 React.js 頁面中顯示 MONGODB 數據

Question

我正在嘗試在 React 網頁中顯示來自 MongoDB 的集合，但目前沒有成功。

我在后端以 json 形式獲得數據，但我不確定如何將其帶到前端。

我得到的數據是這樣的：

{
      _id: 60d5ee8d9f3b772030ae319c,
      username: 'test',
      email: 'test@test.com',
      password: '$2a$10$5F8k.qfP3Bi7vlLKuOxcneejlsnxB4cN1SerV7tFkAS6v2E.YhBqK',
      __v: 0
    }

這是我試圖顯示數據的地方：

    import { useState, useEffect } from "react";
    import axios from "axios";
    import "./PrivateScreen.css";
    
    const PrivateScreen = ({ history }) => {
      const [error, setError] = useState("");
      const [privateData, setPrivateData] = useState("");
    
      useEffect(() => {
        if (!localStorage.getItem("authToken")) {
          history.push("login");
        }
    
        const fetchPrivateDate = async () => {
          const config = {
            headers: {
              "Content-Type": "application/json",
              Authorization: `Bearer ${localStorage.getItem("authToken")}`,
            },
          };
    
          try {
            const { data } = await axios.get("/api/private", config);
            setPrivateData(data.data);
          } catch (error) {
            localStorage.removeItem("authToken");
            setError("You are not authorized please login");
          }
        };
    
        fetchPrivateDate();
      }, [history]);
    
      const logoutHandler = () => {
        localStorage.removeItem("authToken");
        history.push("/login");
      };
    
      return error ? (
        <span className="error-message">{error}</span>
      ) : (
        <>
          <div style={{ background: "green", color: "white" }}>{privateData}</div>
          <button onClick={logoutHandler}>Logout</button>
          <div>DISPLAY THE DATA HERE<div/>
        </>
      );
    };
    
    export default PrivateScreen;

我將獲得的實際數據會很大，我知道我必須映射它，但首先我需要進入這一步：D。 有人可以給我一些提示，如果我沒有提供足夠的細節，對不起，如果你們需要的話，我會嘗試提供更多信息。

謝謝你，祝你有美好的一天！

Answer 1

當您將數據存儲在privateData狀態時，您可以在整個函數中訪問該數據，這是您可以執行的操作的示例。

return error ? (
   <span className="error-message">{error}</span>
) : (
   <>
     <div style={{ background: "green", color: "white" }}>{privateData}</div>
     <button onClick={logoutHandler}>Logout</button>
     <div>email: {privateData.email}, username: {privateData.username}<div/>
   </>
);

或者如果privateData是一個數組，您可以顯示數據幫助map ，這是另一個示例：

return error ? (
   <span className="error-message">{error}</span>
) : (
   <>
     <div style={{ background: "green", color: "white" }}>{privateData}</div>
     <button onClick={logoutHandler}>Logout</button>
     <div>{privateData.map((el) => {
       return (
         el.username
       )
     })}<div/>
   </>
);