Question

我正在尝试将我的Firebase数据库（我有3个）中的项目渲染到我的React组件页面，并且遇到了一些困难。

var config = {
  // ...
};

firebase.initializeApp(config);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }
  }

  componentWillMount() {
    var ref = firebase.database().ref("items");
    this.bindAsArray(ref, "items");
  }

  render() {
    return (
      <div>
        { this.state.items.map(function (item, i) {
          return (
            <h1 className="white">Item</h1>
          )
        }) }
      </div>
    );
  }
}

reactMixin(App.prototype, ReactFireMixin);

export default App;

我是否正确地这样做，我不应该看到三个重复的<h1>元素吗？

感谢任何帮助。提前谢谢！

更新

JSbin示例：http://jsbin.com/xodobohexi/edit?html,js,console,output

Answer 1

如果你想使用ReactFire，你需要开始使用它作为mixin，正如@jacobawen所解释的那样。如果您想在没有ReactFire的情况下渲染它，您可以执行以下操作：

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      items: []
    }
  }

  componentWillMount() {
    var ref = firebase.database().ref("items");
    ref.once('value').then(snap=>{
      if(snap.val()!==null){
        let items=Object.keys(snap.val()).map(item=> return snap.val([item])
        this.setState({items})
      }
    })
  }

  render() {
    const {items} = this.state;
    return (
      <div>
        {items.map((item, i) => { return <h1 key={i}>{item}</h1> }) }
      </div>
    );
  }
}

React + Firebase空数组

1 个答案: