在響應狀態下初始化傳遞火力點值

Question

我正在開發一個反應式家庭自動化項目，在第一個模塊中，燈光處於點亮狀態，我將所有家居燈的狀態存儲在Firebase數據庫中。我在我的應用程序中創建了一個切換功能，並且很快寫入數據庫。那裏沒有問題。 我的問題：我所有的切換按鈕都是簡單的文本，單擊時，通過條件SCSS類更改顏色，但這不是問題。當然，我獨立於數據庫開發了切換方法，所以無論何時刷新頁面並重新渲染組件，所有按鈕都會設置爲初始狀態（全部關閉）。我需要做的是找出一種方法來同步按鈕與Firebase中的相應值。當然，我可以爲每個按鈕索引設置一個狀態，但我認爲包裝切換狀態會更有效。無論如何，我意識到這裏最簡單和最好的解決方案是更新componentDidMound()方法中的toggle state，以便其餘的切換可以獨立於數據庫而發生，並繼續顯示正確​​的值，但是當我嘗試通過數據到我的狀態，它會拋出一個錯誤，說它無法讀取未定義的狀態。如下所示，constructor()也是如此。我已經測試了Firebase正在返回的數據，並且它在打印機上打印了true/false，因此如何將數據從Firebase傳遞到狀態？我是否在初始化按鈕時採用了錯誤的方法？ 這裏是包含上述的問題我的組件：

import React, {Component} from "react" 
import * as firebase from "firebase" 
import colors from "colors" 

var config = { 
    apiKey: "SSSSSSUUUUPPPPEEERRRRLLOONNGGKKKKEEEEYYYYYY!!!", 
    authDomain: "something-someNumbers.firebaseapp.com", 
    databaseURL: "https://something-someNumbers.firebaseio.com", 
    projectId: "something-someNumbers", 
    storageBucket: "something.appspot.com", 
    messagingSenderId: "1111111111" 
} 
firebase.initializeApp(config) 

class Cards extends Component { 
    render() { 
    return (
     <div> 
     <div id="toolbar-spacer"/> 
     <div id="wrapper-div"> 
      <Lights/> 
     </div> 
     </div> 
    ) 
    } 
} 

class Card extends Component { 
    render() { 
    return(
     <div className="card-container"> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

class Lights extends Component { 
    constructor(props) { 
    super(props) 
    } 
    render() { 
    return(
     <Card> 
     <div className="link-wrapper"> 
      {[ 
      {room: 'Office'}, 
      {room: 'Office Bathroom'}, 
      {room: 'Neekon Bedroom'}, 
      {room: 'Ryan Room'}, 
      {room: 'Homework Room'}, 
      {room: 'Living Room'}, 
      {room: 'Gallery'}, 
      {room: 'Guest Bathroom'}, 
      {room: 'Dining Room'}, 
      {room: 'Kitchen'}, 
      {room: 'Master Bedroom'}, 
      {room: 'Family Room'} 
      ].map((item, i) => { 
      return (
       <Room lumer={"s" + item.room.replace(" ", "")} key={i}> 
       {item.room} 
       </Room> 
      ) 
      })} 
     </div> 
     <div id="card-title-footer" /> 
     <div className="link-wrapper"> 
      <Room lumer={"all"}> 
      All Lights 
      </Room> 
     </div> 
     </Card> 
    ) 
    } 
} 

class Room extends Component { 
    constructor(props) { 
    super(props); 
    var room = this.props.lumer 
    var staate; 
    firebase.database() 
    .ref() 
    .child('/rooms/' + room) 
    .once('value') 
    .then(function(snapshot) { 
     staate = snapshot.val() 
     console.log(staate) 
    }) 
    const {isToggleOn} = staate 
    this.state = { isToggleOn } 
    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    componentDidMount() { 

    console.log(this.props.lumer + ': mounted!') 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
    })); 
    var database = firebase.database() 
    firebase.database().ref().child('/rooms/' + this.props.lumer).set(!this.state.isToggleOn); 
    console.log(this.props.lumer + ": " + !this.state.isToggleOn) 
    } 

    render() { 
    return (
     <a onClick={this.handleClick} className={this.state.isToggleOn ? "toggle-text-on" : "toggle-text-off"}> 
      {this.state.isToggleOn ? this.props.children + ': ON' : this.props.children + ': OFF'} 
     </a> 
    ) 
    } 
} 

export default Cards 

PS：我github repo對於一些不清楚的引用可提供上下文應該有任何

任何和所有幫助將不勝感激，並愉快地拍攝。謝謝！

Answer 1

我想通了！ （通過我的開發者朋友）

問題在於它沒有生成放置在我的狀態的正確類型的對象。事實上，我甚至不需要生成任何對象！所有我需要做的是使用this.setState({})的firebase回調 內（W /一個() => {function}），而不是傳統的一個），並簡單地直接傳遞我的變量的狀態，例如：

componentDidMount() { 
    var room = this.props.lumer 
    var staate; 
    firebase.database() 
      .ref() 
      .child('/rooms/' + room) 
      .once('value') 
      .then((snapshot) => { 
     state = snapshot.val() 
     this.setState({ 
     isToggleOn: state 
     }) 
    }) 
    }