Javascript 反应不'；t在组件中执行函数

我目前正在尝试学习使用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>)

    }
}

从“React”导入React
从“../lib/db.js”导入{loadFirebase}
从'react dom'导入{render}
导出默认类项\u Farm.Component{
静态异步getInititalProps（）{
控制台日志（“你好”）
让firebase=loadFirebase（）
让结果=等待新的承诺（（解决，拒绝）=>{
firebase.firestore（）集合（'farms'）
.限额（10）
.get（）
。然后（快照=>{
让数据=[]
console.log（快照）
snapshot.forEach（（doc）=>{
数据推送(
Object.assign({
id:doc.id
}，doc.data（））
)
})
解析（数据）
})
.catch（错误=>{
拒绝（[]）
})
})
返回{farms:result}
}
render（）{
const farms=this.props.farms
返回(
{（farms&&farms.length>0）}

{farms.map（farm=>
{farm.name}
）}

{`
div{
背景颜色：蓝色；
}
`}
)
}
}

我认为函数名中有输入错误。应该是

getInitialProps

---

有关更多信息，请检查

我认为函数名中存在打字错误。应该是

getInitialProps

有关更多信息，请检查代码中所做的更改： 1.您没有调用getInititalProps函数，在componentDidMount中调用它是最好的选择 2.使用状态重新渲染具有firestore响应的视图

我没有测试代码。请检查并在评论中报告任何错误

    export default class Item_Farm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      farms: []
    }
    this.getInititalProps = this.getInititalProps.bind(this);
  }

  async getInititalProps() {
    let firebase = loadFirebase()
    try {
      let reqPromise = firebase.firestore().collection('farms').limit(10).get();
      let snapshot = await reqPromise;
      let data = snapshot.forEach((doc) => {
        return Object.assign({
          id: doc.id
        }, doc.data());
      });
      this.setSate({
        farms: data
      });
    }
    catch (err) {
      console.error(err.message)
    }
  }

  componentDidMount() {
    this.getInititalProps();
  }

  render() {
    const { farms } = this.state;
    return (

      <div id="farms" style={{ backgroundColor: "red" }}>
        <ul>
          {
            (farms && farms.length > 0) ?
              farms.map(farm => (<li key={farm.id}>
                <h1>
                  {farm.name}
                </h1>
              </li>))
              :
              null
          }
        </ul>
      </div>)
  }
}

导出默认类项\u.Component{
建造师（道具）{
超级（道具）；
此.state={
农场：[]
}
this.getInititalProps=this.getInititalProps.bind（this）；
}
异步getInititalProps（）{
让firebase=loadFirebase（）
试一试{
让reqPromise=firebase.firestore（）.collection（'farms'）.limit（10.get（）；
让快照=等待承诺；
让数据=快照.forEach（（doc）=>{
返回Object.assign({
id:doc.id
}，doc.data（））；
});
这是我的({
农场：数据
});
}
捕捉（错误）{
控制台错误（错误消息）
}
}
componentDidMount（）{
this.getInititalProps（）；
}
render（）{
const{farms}=this.state；
返回(

{
（农场和农场长度>0）？
farms.map（farm=>（

{farm.name}
））
:
无效的
}

)
}
}

我希望它能起作用。 祝您好运

代码中所做的更改： 1.您没有调用getInititalProps函数，在componentDidMount中调用它是最好的选择 2.使用状态重新渲染具有firestore响应的视图

我没有测试代码。请检查并在评论中报告任何错误

    export default class Item_Farm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      farms: []
    }
    this.getInititalProps = this.getInititalProps.bind(this);
  }

  async getInititalProps() {
    let firebase = loadFirebase()
    try {
      let reqPromise = firebase.firestore().collection('farms').limit(10).get();
      let snapshot = await reqPromise;
      let data = snapshot.forEach((doc) => {
        return Object.assign({
          id: doc.id
        }, doc.data());
      });
      this.setSate({
        farms: data
      });
    }
    catch (err) {
      console.error(err.message)
    }
  }

  componentDidMount() {
    this.getInititalProps();
  }

  render() {
    const { farms } = this.state;
    return (

      <div id="farms" style={{ backgroundColor: "red" }}>
        <ul>
          {
            (farms && farms.length > 0) ?
              farms.map(farm => (<li key={farm.id}>
                <h1>
                  {farm.name}
                </h1>
              </li>))
              :
              null
          }
        </ul>
      </div>)
  }
}

导出默认类项\u.Component{
建造师（道具）{
超级（道具）；
此.state={
农场：[]
}
this.getInititalProps=this.getInititalProps.bind（this）；
}
异步getInititalProps（）{
让firebase=loadFirebase（）
试一试{
让reqPromise=firebase.firestore（）.collection（'farms'）.limit（10.get（）；
让快照=等待承诺；
让数据=快照.forEach（（doc）=>{
返回Object.assign({
id:doc.id
}，doc.data（））；
});
这是我的({
农场：数据
});
}
捕捉（错误）{
控制台错误（错误消息）
}
}
componentDidMount（）{
this.getInititalProps（）；
}
render（）{
const{farms}=this.state；
返回(

{
（农场和农场长度>0）？
farms.map（farm=>（

{farm.name}
））
:
无效的
}

)
}
}

我希望它能起作用。

---

祝你好运

谢谢你的快速回答，谢谢你指出我已经连续6个小时没有注意到的一个打字错误。虽然这个函数仍然没有被调用，但我很想快速回答并指出一个我已经连续6个小时没有注意到的打字错误。尽管该函数仍然没有被调用。而且，看起来firebase方法已经返回了一个承诺，您可以直接调用call Wait，而不必使用新的承诺进行包装

wait firebase.firestore（）.collection（'farms'）.get（）

我太专注了，以至于无法处理我没有注意到的当前代码。我正在更新代码。感谢您指出。另外，firebase方法似乎已经返回了一个承诺，您可以直接调用call Wait，而不必使用新的承诺进行包装

wait firebase.firestore（）.collection（'farms'）.get（）

我太专注了，以至于无法处理我没有注意到的当前代码。我正在更新代码。谢谢你指出。