javascript - React不执行组件中的功能

我目前正在尝试使用Firebase作为数据库来学习React和next.js。我的组件中有一个函数，但由于某种原因它没有被调用（即我正在尝试做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>)

    }
}

最佳答案

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

getInitialProps

有关更多信息，请检查fetch data next.js

关于javascript - React不执行组件中的功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59599931/