Javascript 在React中呈现状态数组中的项时出错

我在获取渲染函数中的状态数据时遇到问题。 它工作正常，在使用时返回数组

console.log(items)

但是尝试从数组中获取第一项会产生错误

console.log(items[0])

完整代码为：

import React from "react";
import StatsSection from "./../components/StatsSection";
import { db } from "./../util/database";

class IndexPage extends React.Component {

  constructor(props) {
    console.log(props)
    super(props);
    this.state = {};
  }

  componentDidMount() {

    var data = []
    db.collection('test')
      .get().then(snapshot => {
        snapshot.forEach(doc => {
          data.push(doc.data())
        })
      })

    this.setState({
      items: data
    });    
  }

  render() {
    const { items } = this.state
    console.log(items[0])


    return (

      <StatsSection
        color="white"
        size="medium"
        backgroundImage=""
        backgroundImageOpacity={1}
        items={[

          {
            title: "Following",
            stat: "123"
          },
          {
            title: "Followers",
            stat: "456k"
          },
          {
            title: "Likes",
            stat: "789"
          }
        ]}
      />
    );
  }
}

export default IndexPage;

从“React”导入React；
从“/。/components/StatsSection”导入StatsSection；
从“/./util/database”导入{db}；
类IndexPage扩展了React.Component{
建造师（道具）{
控制台日志（道具）
超级（道具）；
this.state={}；
}
componentDidMount（）{
var数据=[]
db.collection（'测试'）
.get（）.then（快照=>{
snapshot.forEach（doc=>{
data.push（doc.data（））
})
})
这是我的国家({
项目：数据
});    
}
render（）{
const{items}=this.state
console.log（项[0]）
返回(
);
}
}
导出默认索引扩展；

---

我哪里出错了？

您只设置了一个项目，因此

项目实际上只是一个项目，
项目[0]
失败

this.setState({
  items: data
});    

应位于
.then（）
中，以便它仅在所有项都填充了
.forEach（）
后运行
 更新您的
组件didmount（）
如下：

componentDidMount() {
  db.collection('test').get().then(snapshot => {
    var data = []
    snapshot.forEach(doc => {
      data.push(doc.data())
    })
    this.setState({ items: data })  
  })
}

你能告诉我们你的数据是什么样的吗？回答你的问题@TonyNgo我的控制台输出是：（1）[…]​0:对象{stat:“999”，title:“title”}​length:1:Array[]main.5b640047.chunk.js:1:2202Ok，所以我设法解决了这个问题。问题正如@James在异步调用中所述。渲染函数被调用了两次。第一次是在加载页面时，第二次是在firestore的数据准备就绪时。我做了一个检查，看看这是不是。状态！=null，现在它可以工作了。这不是最好的解决方案，但效果不错。这句话很好，谢谢。我根据你的密码改了。但在我的特定场景中，结果是一样的。尝试记录整个阵列工作正常，但尝试仅访问一项会导致错误。。。类型错误：“e未定义”。这是非常非信息性的：/Ok，所以我设法解决了这个问题。问题正如@James在异步调用中所述。渲染函数被调用了两次。第一次是在加载页面时，第二次是在firestore的数据准备就绪时。我做了一个检查，看看这是不是。状态！=null，现在它可以工作了。这不是最好的解决方案，但效果不错。这是你的解决方案。我试过了，但结果都一样。我可以正确地记录完整的数组，但不能记录一个特定的项目，这样我就可以在模板中实际使用它。您的数据结构是什么？好的，所以我设法解决了这个问题。问题正如@James在异步调用中所述。渲染函数被调用了两次。第一次是在加载页面时，第二次是在firestore的数据准备就绪时。我做了一个检查，看看这是不是。状态！=null，现在它可以工作了。这不是最好的解决方案，但效果不错。这是一个很好的观点。我仍然假设页面在请求之前是可用的。很高兴你解决了。