我有这样的代码 模型.js
import firebase from '../config/Firebase'
class Dashboard {
GetAllBlog() {
return firebase.collection('blogs').get()
}
}
export default new Dashboard()
然后,我将模型返回到 home.js
import React from 'react';
import Index from './components/index'
import CardOverview from './components/CardOverview'
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container'
import Paper from '@material-ui/core/Paper'
import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography';
import DashboardService from '../services/dashboard'
const styles = theme => ({
root: {
padding: theme.spacing(3, 2),
},
row: {
padding: theme.spacing(3, 2),
}
});
class Home extends React.Component {
state = {
blogs: []
}
componentDidMount() {
DashboardService.GetAllBlog()
.then(snapshot => {
this.setState({
blogs: snapshot
})
})
.catch(err => {
console.log('Error getting documents', err);
});
}
render() {
const { classes } = this.props
const {
blogs
} = this.state
blogs.forEach(element => {
console.log("blogs", element.data().title)
});
return (
.......
但是当像这样使用 foreach 时我得到了双倍
其实我有这样的数据(两条数据)
我看看如何通过将所有快照转换为数组来使其变得简单,(我可以从 firebase 创建连接数组),但我很困惑,为什么这个双循环,但它循环了 2 次,但一次,它是基于循环的按长度排列
最佳答案
这是因为状态改变了2次,那么每次改变状态都会执行渲染
关于javascript - React JS 上的 Firebase Firestore 双循环数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61292681/