Next.js React组件getInitialProps不绑定props

Question

在Next.js中，您可以在React组件中使用绑定到第一次加载时服务器端呈现的生命周期方法。

我尝试使用the ZEIT tutorial（或者on their Github）中提供的这个函数，但是this.props似乎没有得到函数返回的JSON。 当我单击组件时，控制台会打印一个空对象。

import React from 'react'
import 'isomorphic-fetch'
export default class extends React.Component {
    static async getInitialProps () {
        const res = await fetch('https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json')
        const data = await res.json()
        return { data }
    }
    print() {
        console.log(this.props);
    }
    render() {
        return <div onClick={this.print.bind(this)}>print props</div>
    }
}

Answer 1

我遇到此问题是由于我在_app.js（即NextJS Custom App）中添加Redux时引起的问题（不是Redux问题）。当我开始在页面中使用getInitialProps时，尽管静态调用中有数据，但渲染时我的道具为空。原因是我的_app.js中的pageProps传播不正确。

因此，在我的情况下，此修复程序正在自定义_app.js getInitialProps中更改：

return {
  ...pageProps,
  initialReduxState: reduxStore.getState()
}

至：

return {
  pageProps: {...pageProps},
  initialReduxState: reduxStore.getState()
}

..因此，如NextJS doc链接中所示的render方法可以将它们连接起来。

Answer 2

我尝试了你的代码，似乎工作正常，控制台显示this.props：

Answer 3

你可以使用这样的getInitialProps方法进行调用，只需对代码进行少量修改

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import api from './middlewares/api';
import reducers from './reducers';
const middlewaresCreateStore = compose(
  applyMiddleware(thunk, api),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
const configureStore = (initialState) => middlewaresCreateStore(
  reducers(initialState),
  initialState
);
export default configureStore;