动态按钮创建 React答案

【问题标题】：Dynamic Buttons creation React动态按钮创建 React
【发布时间】：2021-05-20 14:45:18
【问题描述】：

我正在尝试将 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>
    )
}
}

我确实得到了控制台日志，这可能意味着 Firebase 数据正在被正确访问。但是，没有创建任何按钮。此外，当我将 componentDidMount() 中的代码块移动到 ChamberClass 的顶部时，按钮确实会显示但只显示一次。在重新加载或手动进入路线后每次连续尝试后也无济于事。

【问题讨论】：

标签： reactjs firebase-realtime-database

【解决方案1】：

您需要将数组chambers 放入组件状态。否则，您会更改值，但您的组件不知道某些内容已更改并且不会按预期呈现。通过将其置于组件状态，它将知道何时发生变化：

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";

export default class ChamberClass extends Component {
  state = {
    chambers: [],
  };

  constructor(props) {
    super(props);
  }

  getButtonsUsingMap = () => {
    return this.state.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) => {
      var chambers = [];

      snapshot.forEach((cham) => {
        var chamKey = cham.key;
        var chamData = cham.val();
        chambers.push(chamKey);
        // document.getElementById("Chambers").innerHTML = chambers
        console.log(chambers);
      });

      this.setState({ chambers });
    });
  }

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

【讨论】：