来自 getServerSideProps 的数据未显示

Question

我正在尝试从 getServerSideProps 获取数据，我确实在控制台中获取了数据，但是当我尝试显示所述数据时，它不会显示。

请注意，我正在从 api 获得响应，但我无法在前端显示数据。

我在哪里获取并将其传递给另一个组件。

我在哪里获取数据

export async function getServerSideProps() {
  const postData = await fetch("http://localhost:8000/api/root/").then(
    (res) => res.json() // Fecthing data and turning response to json
  );

  return {
    props: {
      postData, // Returing feteched data as prop
    },
  };
}

作为道具传递

{user ? (
 <Reddit auth={auth} user={user} posts={postData} />
) : (
 <Login auth={auth} />
)}

这是我的 Reddit.js

import Header from "../components/header/Header";

function Reddit({ auth, user, posts }) {
  return (
    <div>
      <Header auth={auth} user={user} />
      {posts.map((i) => {
        <h1>{i.title}</h1>;
      })}
    </div>
  );
}

export default Reddit;

我将数据作为 prop 传递的组件

import Head from "next/head";
import Reddit from "../components/Reddit";
import firebase from "firebase/compat/app";
import Login from "../components/auth/Login";

import { useAuthState } from "react-firebase-hooks/auth";
import { getAuth } from "firebase/auth";

import "firebase/auth";

// Initializing app
firebase.initializeApp({
  apiKey: "AIzaSyAssbNkDI_99hrs5oBp3DUYbSo7InqY-a8",
  authDomain: "reddit-clone-1f12.firebaseapp.com",
  projectId: "reddit-clone-1f12",
  storageBucket: "reddit-clone-1f12.appspot.com",
  messagingSenderId: "166670883433",
  appId: "1:166670883433:web:f24816c8fe909b0f89e0f8",
});

// Getting authentication api
const auth = getAuth();

export default function Home({ postData }) {
  console.log(postData);
  const [user] = useAuthState(auth); // Checking user's authentication state

  return (
    <div className="h-screen bg-black text-white">
      <Head>
        <title>Reddit - Dive into anything!</title>
        <link rel="icon" href="/logo.svg" />
      </Head>

      {/* If user is logged in, show <Reddit /> otherwise show <Login /> */}
      {user ? (
        <Reddit auth={auth} user={user} posts={postData} />
      ) : (
        <Login auth={auth} />
      )}
    </div>
  );
}

export async function getServerSideProps() {
  const response = await fetch("http://localhost:8000/api/root/");
  const postData = await response.json();

  return { props: { postData } };
}

Answer 1

检查此代码

export function getServerSideProps() {
  const postData = fetch("http://localhost:8000/api/root/").then(
    (res) => res.json()
  );

  return {
    props: {
      postData, 
    },
  };
}

Answer 2

尝试从 return 道具的 postData 中删除多余的大括号。我想它太深了一层。

  return {
    props: postData
  };

解释：

// Your postData object probably looks like:
const postData = { auth: ..., user: ..., posts: ... }

// If you deserialize with extra braces it will fail
const { auth, user } = { postData } // Fails
const { auth, user } = postData // Succeeds

Answer 3

reddit.js

中有错别字

而不是

import Header from "../components/header/Header";

function Reddit({ auth, user, posts }) {
  return (
    <div>
      <Header auth={auth} user={user} />
      {posts?.map((i) => {
        <h1>{i.title}</h1>
      })}
    </div>
  );
}

export default Reddit;

试试这个

import Header from "../components/header/Header";

function Reddit({ auth, user, posts }) {
  return (
    <div>
      <Header auth={auth} user={user} />
      {posts?.map((i) => (
        <h1>{i.title}</h1>
      ))}
    </div>
  );
}

export default Reddit;

来自 getServerSideProps 的数据未显示

Data from getServerSideProps not showing

reactjs

fetch-api

next.js