javascript - React 不执行组件中的函数

Question

我目前正在尝试学习 React 和 next.js 以 firebase 作为数据库。我的组件中有一个函数，但由于某种原因它没有被调用(即我正在尝试执行 console.logs() 但它们不起作用，所以我假设该函数没有被调用)。

这是我的代码，它尝试从 firebase 获取数据，然后将其显示在渲染的组件中:

import React from 'react'
import {loadFirebase} from '../lib/db.js'
import { render } from 'react-dom'

export default class Item_Farm extends React.Component{

static async getInititalProps() {
    console.log("hallo")
    let firebase = loadFirebase()
    let result = await new Promise((resolve, reject) => {
        firebase.firestore().collection('farms')
        .limit(10)
        .get()
        .then(snapshot => {
            let data = []
            console.log(snapshot)
            snapshot.forEach((doc) => {
                data.push(
                    Object.assign({
                        id: doc.id
                    }, doc.data())
                )
            })
            resolve(data)
        })

        .catch(error => {
            reject([])
        })
    })
    return {farms: result}
}
render(){
    const farms = this.props.farms
    return(

    <div id="farms">
        {(farms && farms.length > 0)}
        <ul>
                {farms.map(farm => <li key="{farm.id}"><h1>{farm.name}</h1></li> )}
        </ul>

        <style jsx>{`
      div {
        background-color:  blue;
      }
    `}</style>

    </div>)

    }
}

Answer 1

我认为函数名称有拼写错误。应该是

getInitialProps

欲了解更多信息，请查看fetch data next.js