React

Question

でオブジェクトのキー値にアクセスできません。MongoDBデータベースを使用してReactでプロジェクトを操作しています。オブジェクトのキー値にアクセスしようとしていますが、アクセスしようとするとエラーが発生します。私はオブジェクト自体にアクセスすることができますが、ドット表記法を使用すると直ちにReactがクラッシュし、「TypeError：未定義のプロパティ 'title」を読み取ることができません。私がデータを取得できる唯一の例は、fetchData（）関数がcomponentDidMountを通過する前にログを記録するときです。

class TimelineContainer extends Component { 
    constructor(props){ 
    super(props) 
    this.state = { 
     lifeEvents: [], 
     currentUser: auth.currentUser 
    } 
    } 

    componentDidMount(){ 
    this.fetchData() 
    } 
    fetchData(){ 
    LifeEventModel.all().then((res) => { 
     this.setState ({ 
     lifeEvents: res.lifeEvents, 
     uid: res.lifeEvents.uid, 
     currentUser: auth.currentUser 
     }) 
     console.log(this.state.lifeEvents[0].title) 
    }) 
    } 

Link herokuでホストされているデータベースバックエンド。 Linkと私のgithubレポ。

render(){ 
console.log(this.state.lifeEvents[0].title) 
console.log(this.state.lifeEvents); 
return (
    <div className='timelineContainer'> 
    { 
     (this.state.currentUser != null) ? 
     <div> 
     <CreateLifeEventForm 
      currentUser= {this.state.currentUser} 
      onCreateLifeEvent={this.createLifeEvent.bind(this)} /> 
     <Timeline 
      currentUser= {this.state.currentUser} 
      lifeEvents={this.state.lifeEvents} 
      onDeleteLifeEvent={this.deleteLifeEvent.bind(this)} 
      onUpdateLifeEvent={this.updateLifeEvent.bind(this)} 
     /> 
     </div> : 
     <section className="col-md-4 col-sm-12 add-event">Log in to add a life event</section> 
    } 
    </div> 
) 

}}

上記方法をレンダリングします。最初のコンソールログでエラーがスローされます。第二のものはそうではありません。

Answer 1

データを非同期にフェッチしていないため、初期結果this.state.lifeEventsはnullになる可能性があります。反応するまで状態を更新して再レンダリングするまで、最初にnull値をチェックする必要があります。 試してみてください：

renderView =() => { 
    return (this.state.lifeEvents === null)? <div>Loading...</div> : 
     (<div> 
      <CreateLifeEventForm 
      currentUser= {this.state.currentUser} 
      onCreateLifeEvent={this.createLifeEvent.bind(this)} /> 
     <Timeline 
      currentUser= {this.state.currentUser} 
      lifeEvents={this.state.lifeEvents} 
      onDeleteLifeEvent={this.deleteLifeEvent.bind(this)} 
      onUpdateLifeEvent={this.updateLifeEvent.bind(this)} 
     /> 
     </div>) 
}; 

render(){ 
    return (
    <div className='timelineContainer'> 
    { 
     (this.state.currentUser != null) ? this.renderView() : 
     <section className="col-md-4 col-sm-12 add-event">Log in to add a life event</section> 
    } 
    </div> 
) 
}