TypeError：无法读取BookDetails.render undefined的属性'book'

我试图从renderList中抓取数据并尝试在render（）上使用该数据。当我CONSOLE.LOGTypeError：无法读取BookDetails.render undefined的属性'book'

this.renderList()

以上是我找回数据。

于是就渲染（）我试着CONSOLE.LOG

console.log(this.renderList()[0].book);

上面的代码抛出

TypeError: Cannot read property 'book' of undefined at BookDetails.render

所以好像书是没有定义的渲染（）不知道你怎么可以定义书籍属性render（）。

renderList() { 
     return this.props.list.map((list) => { 
     console.log("list", list.book_id); 
     console.log("params", this.props.params.id) 
     if(list.book_id === parseInt(this.props.params.id)) { 
      console.log("true"); 
      return { 
        book: list.book_id 
       } 
      } 
    }) 
} 
render() { 
    const {post} = this.props; 
    const {user} = this.props; 
    const {list} = this.props; 
    const data= this.renderList()[0].list; 

    if(!post) { 
     return <div>Loading...</div> 
    } 

    if(user) { 
     console.log(this.renderList()); 
     console.log(this.renderList()[0].book); 
     return (
      <div> 
       <h1>Title: {post.title}</h1> 
       <h2>Pages: {post.pages}</h2> 
       <div>Reviews:</div> 
       <button 
        onClick={() => { this.props.addToMyPage(
         { 
          userId: user.user.user_id, 
          bookId: post.book_id 
         } 
         )}}> 
        Add this to my page 
       </button> 
      </div> 
     ) 
    }

来源

2017-04-07 Yh1234

之前，确保你有一个清单是这样的数据加载异步？它可能是它一开始不存在，然后再呈现。 –

我会推荐几件事情。

第一个您的renderList方法正在使用一个映射，但不是每次都返回。这可能会使您在返回的地图中未定义。

renderList() { 
    const elems = []; 
    const urlId = parseInt(this.props.params.id); 
    this.props.list.forEach((list) => { 
     console.log("list", list.book_id); 
     console.log("params", this.props.params.id) 
     if(list.book_id === urlId) { 
      console.log("true"); 
      elems.push({ 
       book: list.book_id 
      }) 
     } 
    }) 
    return elems; 
}

二验证这个数据实际上是存在的最初阶段。这可能是因为数据没有加载，你想它其实进来之前访问的东西。

三你应该使用一个辅助方法来获取值查询过去当多个嵌套对象中删除JS异常。我为此使用lodash。

const renderList = this.renderList(); 
_.get(renderList, '[0].book');

我会HIGHLY建议您使用类似的Lodash get方法来得到的东西的值可以抛出一个js错误。

四你应该调用渲染列表

if(user && list) { 
    const renderList = this.renderList(); 
    console.log(_.get(renderList, '[0].book'));

来源

2017-04-07 22:02:16

感谢您的输入。从中学到很多东西。 @JohnRuddell我不明白的一件事是什么时候应该使用map for forEach？ – Yh1234

@ Yh1234地图返回数组中每个项目的值。所以当你想将数组中的每个项目渲染为一个反应组件时，请使用地图。如果你没有从你的地图返回一些东西，那么undefined被插入到数组中。所以它看起来像这样：[[undefined，undefined，{... data here}，undefined]'当你有像只匹配props.params.id这样的逻辑时，你想要一个forEach，因为你只想渲染一个子集的项目数组。这就是为什么你使用elems数组变量并在需要时将其推入其中的原因。 –

TypeError：无法读取BookDetails.render undefined的属性'book'

回答

相关问题