javascript - 在 React 中从状态数组渲染项目时出错

Question

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

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() 中，这样它只会在所有项目都用 .forEach() 填充后运行。