Next.js中React组件的getInitialProps方法未绑定props。

Question

在Next.js中，您可以在React组件中使用一个生命周期方法，该方法绑定到首次加载时的服务器端渲染。我尝试按ZEIT教程（或他们的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>
    }
}

- imrok

---

你必须在/pages组件中获取它。否则，getInitialProps将不会被调用。你是在定义一个页面还是一个组件？ - elmasse

Answer 1

由于我在添加Redux时（并非Redux问题），在我的_app.js（即NextJS Custom App）中出现了问题，导致了这个问题。当我在页面中使用getInitialProps时，即使静态调用中有数据，我的props在渲染时也为空。原因是在我的_app.js中pageProps的传播不正确。

所以在我的情况下，修复方法是在自定义的_app.js中更改getInitialProps，如下：

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

目标：

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

因此，如NextJS文档链接中所示的渲染方法可以将它们连接起来。

- user10023673

---

这应该是被接受的答案。对我来说，它是一个救命稻草，我自己永远不会解决这个问题。我知道这已经一年了，但如果可能的话，你或其他人能否更详细地解释为什么会出现这个问题以及修复方法如何确切地工作？ - flo

Answer 2

你可以在getInitialProps方法中进行调用，只需稍微修改一下你的代码即可。

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 { jsonData: data }
    }
    print() {
        console.log(this.props.jsonData);
    }
    render() {
        return <div onClick={()=> this.print()}>print props</div>
    }
}

- Manish

---

我在控制台中看到了 undefined :(，并且收到了跨源资源共享（CORS）的阻止访问错误消息：访问'https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json' 被本地地址为'http://localhost:7777'的源禁止，因为请求资源没有包含'Access-Control-Allow-Origin'头部字段。如果一个不透明的响应可以满足您的需求，请将请求模式设置为'no-cors'以禁用CORS并获取该资源。 - Chance Smith

@ChanceSmith 这与 react 或 nextjs 没有任何关系。这是关于 cors 策略的问题。你应该搜索一下它是什么，这样你就能更好地理解了。 - Vencovsky

Answer 3

我尝试了你的代码，看起来运行良好，控制台显示this.props：

- Rudi