Рендер один документ в React с Метеор

Question

Оказывать список документов, я использую .map() на функцию, которая возвращает массив из подписки:

{this.getApplications().map((application) => { 
    return application.name; 
})} 

Но когда я хочу сделать один документ, как это:

export default class ApplicationForm extends TrackerReact(React.Component) { 

    constructor() { 
    super(); 
    this.state = { 
     subscription: { 
      applications: Meteor.subscribe('applications') 
     } 
    } 
    } 

    componentWillUnmount() { 
    this.state.subscription.applications.stop(); 
    } 

    getSingleApplication() { 

    const applicationDoc = Applications.find().fetch(); 

    if (applicationDoc) { 
     return applicationDoc[0]; 
    } 
    } 

    render() { 

    const name = this.getSingleApplication().name; 

    return (
     <div> 
      {name} 
     </div> 
    ); 
    } 
} 

Я получаю следующее сообщение об ошибке:

Cannot read property 'name' of undefined

Я предполагаю, что я отсутствовал на каком-то базовом javascript.

Возможно, это связано с тем, что подписки не были готовы при загрузке страницы?

Answer 1

Во-первых, использовать .findOne(), когда вы хотите, чтобы найти единый документ. Это возвращает объект вместо курсора, поэтому вам не нужно .fetch() или .map().

getSingleApplication() { 
    return Applications.findOne(); 
} 

Затем вам нужно закодировать защищаясь в случае, если ничего не найдено (что может произойти, если ваша подписка не готова к примеру).

render() { 

    const app = this.getSingleApplication(); 
    const name = app && app.name; 

    if (name) { // assuming you don't want to render anything if there is no name 
    return (
     <div> 
     {app.name} 
     </div> 
    ); 
    } 
} 

Answer 2

Отказ от ответственности: Я никогда не использовал Meteor, и это не проверено.

У вас должен быть способ реагировать на готовность вашей подписки, и если я правильно понимаю документы, вы делаете это, передавая функцию обратного вызова при подписке.

Так что вам нужно

constructor() { 
    super(); 
    this.state = { 
     ready: false, 
     subscription: { 
      applications: Meteor.subscribe('applications',() => this.setState({ready: true}) 
     } 
    } 
    } 

и визуализации:

render() { 
    if (!this.state.ready) return null; 
    const name = this.getSingleApplication().name; 

    return (
     <div> 
      {name} 
     </div> 
    ); 
    }