Question

我有一个React组件，我试图传递一些道具，但我得到一个未捕获的错误：App.render（）：必须返回一个有效的React元素（或null）。您可能已经返回undefined，数组或其他一些无效对象。当我尝试在快照中返回它时。

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

Firebase数据到React组件

1 个答案: