在 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/>
   </>
);