Question

我尝试下面的代码显示嵌套值，但解析错误。请检查链接以查看对象

第116行：解析错误：意外的令牌，预期为“，”

render(){
    return(

               {this.state.SearchBooks.map(book => 

                <h1>{ book.bookname}</h1>
                {book.assignedto.map(assbook=>
                  <h1>{assbook.userid}</h1>
                )}

               )} )}

This is the object present in firebase i have stored it in this.state

Answer 1

您的花括号不平衡：

{book.assignedto.map(assbook => <h1>{assbook.user,id</h1>)}

应该是

{book.assignedto.map(assbook => <h1>{assbook.user},{id}</h1>)}

或者，按照您的修改/更正：

{book.assignedto.map(assbook => <h1>{assbook.userid}</h1>)} // the } after userid

最后，您需要用一个顶级元素将其包装起来，因此添加一个片段：

    <>
      <h1>title</h1>
      {book.assignedto.map(assbook => <h1>...</h1>)}
    </>

Answer 2

更改：

{this.state.SearchBooks.map(book => (
      <h1>{ book.bookname}</h1>
      {book.assignedto.map(assbook => <h1>{assbook.userid}</h1>
)}

收件人：

{this.state.SearchBooks.length && this.state.SearchBooks.map(book => (
    // add this
    <>
       <h1>{ book.bookname}</h1>
       {book.assignedto && book.assignedto.map(assbook => <h1>{assbook.userid}</h1>
    // and this
    </>
)}

试图在反应中显示嵌套对象

2 个答案: