Firebase Firestore Double L oop Данные по React JS

Question

У меня есть код, подобный этой модели. js

    import firebase from '../config/Firebase'
    class Dashboard {
        GetAllBlog() {
            return firebase.collection('blogs').get()
        }
    }
    export default new Dashboard()

затем я возвращаю модель домой. 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 как это

.,

На самом деле, у меня есть такие данные (Два данных)

Я смотрю, как сделать это проще с Convert All snapshot to Array, (я могу создать объединенный массив из firebase), но я запутался, Почему это удвоенное l oop, но оно l oop 2 раза , но за один раз его l oop основан на длине

Answer 1

это потому, что состояние менялось 2 раза, тогда рендеринг будет выполняться каждый раз, когда вы меняете состояние