反応状態でパスファイヤーベース値を初期化する

Question

私は反応ホームオートメーションプロジェクトに取り組んでいます。最初のモジュールでは、すべてのホームライトの状態がfirebaseデータベースに保存されています。私は自分のアプリでトグル機能を作成するのに成功し、素早くデータベースに書き込みます。そこに問題はありません。 私の問題：私のトグルボタンはすべて、クリックすると条件付きのSCSSクラスを介して色が変わるという単純なテキストですが、それ以外の問題です。もちろん、自分のデータベースとは独立してトグル方法を開発しました。そのため、ページが更新され、コンポーネントが再レンダリングされるたびに、すべてのボタンが初期状態（すべてオフ）に設定されます。私がする必要があるのは、ボタンを対応する値とFirebaseで同期させる方法です。もちろん、ボタンのインデックスごとに状態を設定することもできますが、ラッパーのトグル状態がより効率的になると考えました。とにかく、ここではシンプルで最高のソリューションは、のcomponentDidMound()メソッドを更新することで、残りの切り替えはデータベースとは独立して行われ、正しい値を表示し続けることがわかりましたが、私の状態にデータを、それは未定義の状態を読み取ることができないというエラーをスローします。以下に示すように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

私はそれを理解しました！ （私の開発者の友人を介して）

問題は、私の状態で配置するオブジェクトの正しいタイプを生成していないということでした。実際には、オブジェクトを生成する必要は全くありませんでした。

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