Question

使用MongoDB数据库在React中处理项目。我试图访问对象中的键值，但是当我尝试访问它时出现错误。我可以自己访问对象，但是一旦我使用点表示法，React崩溃并说出TypeError：无法读取属性＆＃39; title＆＃39;未定义的。我可以获取数据的唯一实例是在我通过componentDidMount之前控制登录我的fetchData（）函数。

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可能为空。所以你必须首先检查空值，直到反应更新状态并重新渲染。试试这个：

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>
  )
}

无法使用React访问对象中的键值

1 个答案: