TypeError：无法在BookDetails.render中读取未定义的属性'book'

Question

我正在尝试从renderList中获取数据并尝试在render（）上使用该数据。 当我console.log

  

this.renderList（）

以上是我回来的数据。

所以在渲染（） 我试过console.log

  

的console.log（this.renderList（）[0] .book）;

以上代码抛出

  

TypeError：无法在BookDetails.render中读取未定义的属性'book'

因此看起来书中没有定义book（），因此不确定如何将book属性定义为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>
        )
    }

Answer 1

我会推荐几件事。

首先您的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 Exceptions。我为此使用了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'));