Question

我正在尝试将单个项目从Firebase返回到我的ReactJS应用程序。

为什么这段代码不起作用？

renderItem: function() {
  var id = "-K7rCis1K3wyVnDbLzs3";
  var child = <h2>{this.state.items[id].title}</h2>
  return child;
},

在控制台中它说：无法读取未定义的属性“标题”

我可以返回包含其中所有数据的单个项目，但不仅仅是标题。这个的正确语法是什么？

谢谢：）

*编辑* 这是完整的代码

var HelloWorld = React.createClass({
    mixins: [ReactFireMixin],
    getInitialState: function() {
      return {
        items: {},
        loaded: false
      };
    },
    componentWillMount: function() {
      fb = new Firebase("firebasepath");
      this.bindAsObject(fb, "items");
      fb.on("value", this.handleDataLoaded);
    },

    render: function() {
      return <div>
        {this.renderItem()}
      </div>
    },
    renderItem: function() {
      var id = "-K7rCis1K3wyVnDbLzs3";
      var child = <h2>{this.state.items[id].title}</h2>
      return child;
    },

    handleDataLoaded: function() {
      this.setState({loaded: true});
    }

  var element = React.createElement(HelloWorld);
  React.render(element, document.body);

Answer 1

要使this.state.items与items节点的任何更改保持同步，请在componentWillMount（）中进行以下更改：

componentWillMount: function() {
   var ref = new Firebase("https://ReactFireTodoApp.firebaseio.com/items");
   this.bindAsArray(ref, "items");
}

以前代码中的两个关键内容：

1）ref是“items”节点的链接：https://yourawesomeapp.firebaseio.com/items

您也可以使用ref作为根节点，但不要忘记将“items”引用为根节点的子节点：

ref = this.firebaseRef.child('items');

2）我们将项目绑定为数组，而不是对象（它为我们提供了更多的监听器，如child_added，child_changed on items）

此外，您可以使用此项目：

var ref = new Firebase("https://ReactFireTodoApp.firebaseio.com/items");
ref.child(key);

最后一件事，也值得重视。 Items是一个数组。并且您可以通过索引从0到array.length从任何数组中获取对象。但是你试图通过'.key'从数组中获取元素。

for (var i = 0; i < this.state.items.length; i++) {
    if (this.state.items[i]['.key'] === '-Kw3-fxa+0G42_w33Jf0') {
        console.log(this.state.items[i]);
    }
}

Answer 2

感谢您的回答。我发现了一个适合我的代码的解决方案，其中包括：

＆＃13;

renderItem: function() {
      var id = "-K7rCis1K3wyVnDbLzs3";
      var item = this.state.items[id];
      if(item) {
        return <h2>{item.title}</h2>
      } else {
        <div>Loading..</div>
      }
    },

＆＃13;

它没有显示的原因是我的组件在数据实际加载之前渲染了一次。

React和Firebase：返回单个项目

2 个答案: