React and Firebase: return single item

Question

Я пытаюсь вернуть один элемент из Firebase в мое приложение ReactJS.

Почему этот код не работает?

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

В консоли он говорит: Не удается прочитать свойство «название» неопределенной

я могу вернуть один элемент со всеми данными в нем, но не только название. Для чего нужен правильный синтаксис?

Спасибо :)

* EDIT * Вот полный код

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

Спасибо за ответ. Я нашел решение, которое вписывается в мой код, здесь идет:

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

Причина, почему он не показывал, что мой компонент рендеринга однажды фактически загружены данные.

Answer 2

Чтобы сохранить this.state.items в синхронизации с любыми изменениями в узле пунктов, внести следующие изменения в componentWillMount():

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

Две ключевые вещи в предыдущем коде:

1) ссылка является ссылкой на «пункты» узел: https://yourawesomeapp.firebaseio.com/items

Вы также можете использовать реф корневой узел, но не забудьте получить «пунктов» реф как ребенка корневого узла:

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

2) Мы связываем элементы как массив, а не как объект (это дает нам больше слушателей, как child_added, child_changed по пунктам)

Кроме того, вы можете получить ваш деталь используйте:

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

И последнее, но и ценное. Элементы - это массив. И вы можете получить объект из любого массива с индексом от 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]); 
    } 
}