Question

我编写了一个小代码，在其中我在Firestore中获取集合的大小，然后将其呈现在for循环中。当我将一个数字放入for循环中时，效果很好。但是，当我尝试放入尺寸时，它不起作用。

import React, { Component } from 'react';
import './App.css';

import Title from './comonents/Title'
import Player from './comonents/Player'
import RoundTest from './comonents/RundeTest'

import db from './FirestoreConfig';


class App extends Component {

  componentDidMount(){
    db.collection('player').get().then(snap => {
      size = snap.size
      console.log(size);
    })
  }

  createRunde = () => {
    let runde = []
    // 5 is here the number 
    for (let i = 1; i < 5; i++) {
      runde.push(<div id="runde"><RoundTest rundeComp={i}/></div>)
    }
    return runde
  }


  render() {
    return (
      <div className="APP">
        <div id="title">
          <Title/>
        </div>
        <div id="player">
          <Player/>
        </div>

        <div id="runderoot">
          {this.createRunde()}
        </div>
      </div>
    );
  }
}

export default App;

有人想解决这个问题吗？

Answer 1

您遇到一些范围问题。由于您要根据尺寸更新渲染，因此最好将尺寸存储在state中，并在获取快照后调用setState。

Firestore：动态响应渲染组件

1 个答案: