ReactコンポーネントへのFirebaseデータ

Question

私はいくつかの小道具を渡そうとしているが、を取得するReactコンポーネントがあります。キャッチしていないエラー：App.render（）：有効なReact要素（またはnull）を返す必要があります。未定義、配列またはその他の無効なオブジェクトを返した可能性があります。私はスナップショットの中でそれを返そうとします。

// cache settings data 
fire.settings = {}; 
fire.settings.ref = fire.database.ref('settings'); 

// main app build 
class App extends Component { 
    render() { 
     // get values from firebase 
     fire.settings.ref.on('value', function(data) { 
     return (<Home settings={data.val()} />); 
     }); 
    } 
} 

だから私は、発電機をいじり始めたと私は、コンポーネントがレンダリングするために取得するが、私はちょうど私の小道具設定で空のオブジェクトを取得します。あなたが返すようにしようとしているコンポーネント

// init render 
fire.settings.ref.on('value', function(data) { 
    ReactDOM.render(
     <App settings={data.val()}/>, document.getElementById('app')); 
}); 
export default App; 

Answer 1

にレンダリングして値を渡し

// main app build 
class App extends Component { 
    componentDidMount() { 
     this.fire.settings.ref.on('value', function(snapshot) { 
      this.props.settings = snapshot.val(); 
     }, (error) => console.log(error), this); 
    } 
    render() { 
     return (<Home settings={this.props.settings}/>); 
    } 
} 

が

を解決しよう（）componentDidMountを使用して

// main app build 
class App extends Component { 
    render() { 
     // get values from firebase 
     function* generator() { 
     fire.settings.ref.on('value', function(data) { 
      fire.settings.snapshot = data.val(); 
     }); 
     yield fire.settings.snapshot; 
     } 
     // init generator and return homepage 
     let promise = generator(); 
     return (<Home settings={promise.next()} />); 
    } 
} 

だけでなく、あなたのasyであるリスナーのコールバック内の要素nchronous。その代わりに、リスナをcomponentDidMountの内側に設定し、コールバック内でsetStateを呼び出す必要があります。

// cache settings data 
fire.settings = {}; 
fire.settings.ref = fire.database.ref('settings'); 

// main app build 
class App extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { data: null }; 
    this.onSettingsChanged = this.onSettingsChanged.bind(this); 
    } 

    onSettingsChanged(data){ 
    this.setState({data: data.val()}); 
    } 

    componentDidMount() { 
    fire.settings.ref.on('value', this.onSettingsChanged); 
    } 

    render() { 
    return (<Home settings={this.state.data}/>); 
    } 
}