Reactjs 动态按钮创建

我试图将firebase数据提取到一个数组中，并为每个元素创建一个按钮，将该元素作为id和名称

import React, { Component } from 'react'
import app from './firebase'
import firebase from "firebase/app";
import "firebase/database"
import { BsFillSquareFill } from "react-icons/bs";
import { Container,Row, Col } from "react-bootstrap";
import { withRouter } from 'react-router-dom';


var chambers = []
export default class ChamberClass extends Component {

    constructor(props) {
        super(props);

    }

      

  getButtonsUsingMap = () => {
    
    
  return chambers.map((number) => {
         return  <button id={number} onClick={this.routeChange} className="btn"><BsFillSquareFill key = {number} color='green' className="icon "/>
         <center>{number}</center>
         </button>
   
        
     })

   }

  componentDidMount(){

    var chamberListen = firebase.database().ref()
    chamberListen.on('value', snapshot => {
      snapshot.forEach((cham) => {
        var chamKey = cham.key;
        var chamData = cham.val();
        chambers.push(chamKey)
        // document.getElementById("Chambers").innerHTML = chambers
        console.log(chambers)
      })
    })


  }

render() {    
    return (
        <div>
    <h4 className='RoomsTitle'>Rooms</h4>
    <hr></hr>
    {this.getButtonsUsingMap()}

        </div>
    )
}
}

import React，{Component}来自“React”
从“./firebase”导入应用程序
从“firebase/app”导入firebase；
导入“firebase/数据库”
从“反应图标/bs”导入{BsFillSquareFill}；
从“react bootstrap”导入{Container，Row，Col}；
从“react router dom”导入{withRouter}；
var chambers=[]
导出默认类ChamberClass扩展组件{
建造师（道具）{
超级（道具）；
}
getButtonsUsingMap=（）=>{
返回室图（（编号）=>{
返回
{number}
})
}
componentDidMount（）{
var chamberListen=firebase.database（）.ref（）
chamberListen.on（'value'，snapshot=>{
snapshot.forEach（（cham）=>{
var chamKey=cham.key；
var chamData=cham.val（）；
钱伯斯。推（chamKey）
//document.getElementById（“Chambers”）.innerHTML=Chambers
控制台日志（文件室）
})
})
}
render（）{
返回(
房间

{this.getButtonSsingMap（）}
)
}
}

我确实得到了控制台日志，这可能意味着firebase数据被正确访问。但是，没有创建任何按钮。

---

另外，当我将componentDidMount（）中的代码块移动到ChamberClass的顶部时，按钮确实会显示，但只显示一次。在每次重新加载后的连续尝试后，或手动转到路线也没有帮助。

您需要将阵列

腔室

置于组件状态。否则，您将更改值，但您的组件不知道某些内容已更改，并且无法按预期进行渲染。通过将其置于组件状态，它将知道其何时更改：

import React，{Component}来自“React”；
从“/firebase”导入应用程序；
从“firebase/app”导入firebase；
导入“firebase/数据库”；
从“反应图标/bs”导入{BsFillSquareFill}；
从“react bootstrap”导入{Container，Row，Col}；
从“react router dom”导入{withRouter}；
导出默认类ChamberClass扩展组件{
状态={
商会：[]，
};
建造师（道具）{
超级（道具）；
}
getButtonsUsingMap=（）=>{
返回此.state.chambers.map（（编号）=>{
返回(
{number}
);
});
};
componentDidMount（）{
var chamberListen=firebase.database（）.ref（）；
张伯伦.on（“值”，（快照）=>{
风险值=[]；
snapshot.forEach（（cham）=>{
var chamKey=cham.key；
var chamData=cham.val（）；
钱伯斯。推（chamKey）；
//document.getElementById（“Chambers”）.innerHTML=Chambers
控制台、日志（分室）；
});
这个.setState（{chambers}）；
});
}
render（）{
返回(
房间

{this.getButtonSsingMap（）}
);
}
}