在 React 中从 state 数组渲染项目时出错

Question

我在渲染 function 中获取 state 数据时遇到问题。 它工作正常并在我使用时返回数组

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;

我在哪里犯错？

Answer 1

您只设置一项，因此items实际上只是一项并且items[0]失败。

this.setState({
  items: data
});    

应该在 .then .then()内，以便它仅在所有项目都填充有.forEach()后运行。

Answer 2

像这样更新您的componentDidMount() ：

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