Question

我正在尝试将 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 的顶部时，按钮确实会显示但只显示一次。重新加载或手动前往路线后的每次连续尝试也无济于事。

Answer 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>
    );
  }
}

动态按钮创建反应

1 个答案: