prop对象的属性有时为null

Question

我正在将一个对象传递到我的ReactJS组件中。

 <Route path="/products/:id" render={(props) =>{
      return (<Book {...props} books={this.props.products}/>)
    }} />

books是一个数组对象，在其中找到一个与

中给出的ID相匹配的对象

我可以成功记录低音的对象

 let books =(props.books[0]) //logs object succesfully

但是当我尝试访问道具时，却无法定义。

我尝试使用setTimeOut函数等待一会儿，虽然它给出了相同的错误，但也登录到了控制台

  let books =(props.books[0]) 
setTimeout(function(){
    console.log(books.id) // logs then fails
}, 100)

我如何使其停止？

console.log(props.books)的输出

(4) [{…}, {…}, {…}, {…}]
0: {id: 1, title: "How to Learn JavaScript - Vol 1", info: "Study hard"}
1: {id: 2, title: "How to Learn ES6", info: "Complete all exercises :-)"}
2: {id: 3, title: "How to Learn React", info: "Complete all your CA's"}
3: {id: 4, title: "Learn React", info: "Don't drink beers, until Friday (after four)"}
length: 4

console.log(props.books[0])的输出

{id: 1, title: "How to Learn JavaScript - Vol 1", info: "Study hard"}


  <Route path="/products" render={() => <Product products={this.state.books}/>} />

//here this.state.books equals [
    { id: 1,title: "How to Learn JavaScript - Vol 1", info: "Study hard"},
    { id: 2,title: "How to Learn ES6", info: "Complete all exercises :-)"},
    { id: 3,title: "How to Learn React",info: "Complete all your CA's"},
    { id: 4,title: "Learn React", info: "Don't drink beers, until Friday (after four)"
    }
  ]