React/Jsx内のオブジェクトのリストをトラバースする

Question

JSX内のオブジェクトのリストをトラバースしようとしています。私は、オブジェクトのリストを持っている場合

renderBooks(book) { 
    return(
     <div> A new book </div> 
     {book.id}, {book.timeIn} 
    ); 
    } 


    render() { 
     console.log("the values are", this.props.bookList);  
     return (
      <div > 
       <h1> The Books </h1> 
        {this.props.bookList.map(this.renderBooks.bind(this))} 
      </div> 
     ); 
    } 
} 

上記のコードは動作しますが、FireBaseは私にオブジェクトのリストが、オブジェクトの対象ではありません。このように見えるデータを送信した：

があります私は、このデータと類似した何かを行うだけでなく、IDを（-KbMAsG9X ...？）を得ることができる方法は

UPDATEは--- 私は、この別の方法を試してみました

renderBooks() { 
    return _.map(this.props.bookList, (timeIn) => { 
     return(  
     <li className="list-group-item"> 
      {timeIn} 
      <button 
       className="btn btn-danger right"> 

       Book Exists 
      </button> 
      </li> 
     ); 
    }); 
    } 

    render() { 
     return (
      <div > 
       <h1> The Books </h1> 
       {this.renderBooks()} 
      </div> 
     ); 
    } 
} 

私は反復することができますが、解決済みやtimeInのようなオブジェクトの値にはまだアクセスできません。私が手にエラーがある：

Error: Objects are not valid as a React child (found: object with keys {address, resolved, timeIn}) 

Answer 1

問題は（return _.map(this.props.bookList, (timeIn) => { ... })中）timeInが、実際には、あなたの「本」オブジェクトであるということです。

ので、反応すると言う：

Error: Objects are not valid as a React child (found: object with keys {address, resolved, timeIn})

それはあなたの「本」のオブジェクトをレンダリングする方法を知らないと言っています。 {timeIn}を使用してレンダリングしようとしています（この場合は、timeInというプロパティではなく、ブックオブジェクト全体です）。

ブックオブジェクトを正しく使用するだけで済みます。そのような何かに動作します：

renderBooks() { 
    return _.map(this.props.bookList, (book) => { 
     return (
      <li className="list-group-item"> 
       {book.id} - {book.timeIn} 
      </li> 
     ) 
    }); 
} 

あるいは、より多くのファッションの方法で、（あなたがオブジェクトな破壊を使用することができる場合）：

renderBooks() { 
    return _.map(this.props.bookList, ({ id, timeIn }) => { 
     return (
      <li className="list-group-item"> 
       {id} - {timeIn} 
      </li> 
     ) 
    }); 
} 

はそれが役に立てば幸い！