Firebase 数据到 React 组件

Question

我有一个 React 组件，我试图传递一些道具，但我得到一个 Uncaught Error: App.render(): A valid React element (or null) must be returned。您可能返回了未定义、数组或其他一些无效对象。当我尝试在快照中返回它时。

// 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()} />);
      });
    }
}

所以我开始搞乱生成器并让组件渲染，但我的设置道具中只得到一个空对象。

// 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()} />);
    }
}

以及使用 componentDidMount()

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

已解决

将值通过渲染传递给组件

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

Answer 1

您试图在异步侦听器的回调中返回您的元素。取而代之的是，您应该在 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}/>);
  }
}