Question

这是我的componentDidmount

componentDidMount() {
    for ( var i in course ) {
        let title = course[i];
        const ref = firestore.collection('courses');
        ref.where("class", "array-contains", course[i]).get()
            .then(querySnapshot => {
                const count = querySnapshot.size
                course_stats.push({
                    title: title,
                    value: count,
                });
            });
    }

    console.log(course_stats)
    this.setState({
        courses: course_stats,
    })
  }

这是我的渲染

render() {
    const { classes } = this.props; 
if (this.state.courses) {
    console.log(this.state.courses)
    return (
        <ul>
            {course_stats.map(d => <li key={d.title}>{d.title}</li>)}
        </ul>
    )
}

在console.log上的

中，我可以看到其中的对象数组。但是，当我尝试渲染时，它什么也没显示。 this is the console.log capture

如何呈现数组的标题和值？谢谢！

Answer 1

添加到izb的答案中，this.setState已经执行，因此您应该使用async / await，或添加类似这样的单独的回调函数以返回Promise

setAsync(state) {
  return new Promise((resolve) => {
    this.setState(state, resolve)
  });
}

handleChange = (event) => {
  return this.setAsync({[event.target.name]: event.target.value})
}

如何在反应中渲染对象数组？

1 个答案: