发送参数以获取 getInitialProps react 和 nextjs答案

【问题标题】：Send param to fetch in getInitialProps react and nextjs发送参数以获取 getInitialProps react 和 nextjs
【发布时间】：2020-01-13 15:52:17
【问题描述】：

我正在准备向 getInitialProp 函数发送一个参数，以将 fecth 设置为正确的 json。

这是我的代码： hepler.js --> 在这里我自己进行了提取。

export async function getEvents() {
  const res = await fetch("https://url/eventos.json");
  let new_data = await res.json();

  return { events: new_data.data };
}

export async function getDetails(slug) {
  const res = await fetch(`https://myurl/${slug}.json`);
  let data_detail_event = await res.json();
  return { data_detail_event };
}

_app.js // 这里我有 getInitialProps 并且效果很好

import App from "next/app";
import ContextProvider from "../provider/ContextProvider";
import fetch from "isomorphic-unfetch";
import {getEvents, getDetails} from '../helper/index'

export default class MyApp extends App {
  static async getInitialProps() {

    const events = await getEvents();
    return {
      events : events.events
    };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <div>
        <ContextProvider events={this.props.events} >
          <Component {...pageProps} />
        </ContextProvider>
      </div>
    );
  }
}

pages/[id].js

import { useRouter } from "next/router";
import Context from "../../config/Context";
/* Components */
import WordCounter from "../../components/word-counter/WordCounter";

function Post(props) {
  const router = useRouter();
  const context = React.useContext(Context);
  return (
    <React.Fragment>
     <WordCounter />
    </React.Fragment>
  );
}
Post.getInitialProps = async ({ query}) => {
  const detail = await getDetail(query.id) --> here I send the param and it seems never arrive to helper.js, why?
  return {detail}
}
export default  Post

问题出在哪里？帮助！谢谢！

【问题讨论】：

如果你在getDetails 中执行console.log(slug) 会得到什么？
嗨 Nico.. 我什么也没得到...
如果在 Post 中创建一个函数，我可以让它工作，如下所示：` const data = async () => { const detail = await getDetails(router.query.id) console.log( detail) return {detail} } data();` 但我认为这不是最好的方法..

标签： reactjs next.js server-side-rendering

【解决方案1】：

我认为 getInitialProps 在服务器中运行，并且您的辅助函数不会在那里加载。

在 getInitialProps 中使用 fetch 。

【讨论】：