React JS - Next JS 应用中无法获取 `props`

Question

我正在使用 React Js 和 Next Js 框架开发 Server Side Rendering 的React应用程序，并尝试通过参考文档(getServerSideProps的Next js文档)使用getServerSideProps方法获取初始props。

但是在每个请求中，我总是得到空的props对象，即{}。现在，我只是尝试传递一个假文本作为props。

如何在初始加载时获取我的props呢？

请参考下面的代码：

import React from "react";
import { Provider } from "react-redux";
import ConfigureStore from "../Store";

const Home = props => {
  const store = ConfigureStore();
  console.log("props", props);
  return (
    <Provider store={store}>
      <div>My content</div>
    </Provider>
  );
};

// This gets called on every request
export async function getServerSideProps() {
  const data = "Hello World";
  return { props: data };
}

export default Home;

- Akshay

---

你应该在组件范围之外配置你的商店！ - Alexandre Nicolas

它可以与 Home.getInitialProps 一起使用，但在文档中，它现在被称为旧的过程。 - Akshay

嗨！你解决了吗？你把_app.js文件加入到你的项目里了吗？ - Uladz Kha

Answer 1

getServerSideProps 的问题在于它只能从页面中 导出。你不能从非页面文件中导出它。getStaticProps 也是一样的。

因此，你无法在部分组件中使用它。

这意味着你只能直接在 /page 目录下的文件中使用它。

- Hasan Sefa Ozalp

Answer 2

import React from "react";
import { Provider } from "react-redux";
import ConfigureStore from "../Store";

const Home =({ data }) => {
  console.log("data", data);
  return (
      <div>My content</div>
  );
};

// This gets called on every request
export async function getServerSideProps() {
  const data = "Hello World";
  return { props: {data :"Hello World"} };
}

export default Home;

- Rebai Ahmed

---

数据给我未定义。 - Akshay

我有同样的问题，但你的答案没有解决它。请参见：https://dev59.com/3bnoa4cB1Zd3GeqPWsTJ - ekkis