別のコンポーネント内のコンポーネントをレンダリングしようとすると、小道具が未定義になる

Question

ProfilePageコンポーネント内にBookListコンポーネントをレンダリングしようとしていますが、私は自分で修正できないような問題に遭遇しました。私は原因が何であるか全く分かりません。 BookListがページをコメントアウトされ

import React from 'react'; 
import { connect } from 'react-redux'; 
import { getUser, deleteBook } from '../actions/actions'; 
import { addFlashMessage } from '../actions/flashMessages'; 
import BookList from './BookList'; 

class ProfilePage extends React.Component { 

    componentWillMount =() => { 
     // Get user data by username 
     this.props.getUser(this.props.match.params.username) 
      .catch(err => { 
       this.props.addFlashMessage({ 
        type: 'error', 
        text: err.response.data.error, 
       }) 
      }); 
    }; 

    render() { 
     const { picture, name, email, books } = this.props.profileUser; 
     console.log(picture, name, email, books); 
     const whenOwner = (
      <div className="extra"> 
       <div className="ui right floated primary button"> 
        Edit 
        <i className="right edit icon"></i> 
       </div> 
      </div> 
     ); 
     return (
      <div className="ui items"> 
       <div className="item"> 
        <div className="ui small image"> 
         <img src={picture || 'https://semantic-ui.com/images/wireframe/image.png'} alt="Profile picture"/> 
        </div> 
        <div className="content"> 
         <div className="header"> 
          {name} 
         </div> 
         <div className="description"> 
          <p>{email}</p> 
         </div> 
         {this.props.currentUser && whenOwner} 
        </div> 
       </div> 
       {/*<BookList books={books} deleteBook={this.props.deleteBook}/>*/} 
      </div> 
     ) 
    } 
} 

function mapStateToProps(state) { 
    if(state.auth.isAuthenticated) { 
     return { 
      currentUser: state.auth, 
      profileUser: state.user 
     } 
    } else { 
     console.log(state); 
     return { 
      profileUser: state.user 
     } 
    } 
} 

React.propTypes = { 
    profileUser: React.PropTypes.object.isRequired, 
    currentUser: React.PropTypes.object, 
}; 


export default connect(mapStateToProps, { getUser, addFlashMessage, deleteBook })(ProfilePage); 

がうまくレンダリング：
はここProfilePageコンポーネントです。 BookListの関連する小道具もすべてそこにあります。しかし、私がBookListのコメントを外すとすぐに、books（this.props.profileUser.books）が定義されていないというエラーが出ます。 これは、正確なエラーが反応される例外：私はどこかにそれを使用していますし、それが正常に動作しているため

TypeError: Cannot read property 'map' of undefined 
BookList 
C:\Users\erody\WebstormProjects\book_trading_club\src\components\BookList.js:16 

私は、BookListコンポーネント自体に問題があることを疑います。しかし、ここでそれはとにかくです：

import React from 'react'; 
import BookCard from './BookCard'; 

const BookList = ({books, deleteBook}) => { 

    console.log(books); 

    const emptyMessage = (
     <p> 
      There are no books. 
     </p> 
    ); 

    const bookList = (
     <div className="ui five cards"> 
      { books.map(book => <BookCard deleteBook={deleteBook} book={book} key={book._id}/>)} 
     </div> 
    ); 

    return (
     <div> 
      {books.length ? bookList : emptyMessage} 
     </div> 
    ) 
}; 

BookList.propTypes = { 
    books: React.PropTypes.array.isRequired, 
    deleteBook: React.PropTypes.func.isRequired 
}; 

export default BookList; 

Reduxのを覗きすべてがうまくようだデベロッパーツール。アクションがディスパッチされ、状態が正しく更新されます。
アクションを追加して関連レデューサーを追加しても問題がない場合は、このポストを長くしすぎないようにしたいと考えています。

Answer 1

問題は、bookListオブジェクトが宣言されているときにbooksオブジェクトをマップしようとしていることです。そして、書籍が定義されているかどうかを確認せずにこれを実行しようとします。

ので、こののワークフロー：

1. は、ブックリストを宣言 - >試す-INGの本をマッピングするために
2. リターンオブジェクト - > books.length>が0かどうかを確認 - >何か

をレンダリングあなたのコードに

ソリューションは、これをすることができます： `this.props.profileUser.books`が配列でないよう

const bookList = books && books.length ? (
    <div className="ui five cards"> 
     { books.map(book => <BookCard deleteBook={deleteBook} book={book} key={book._id}/>)} 
    </div> 
) : emptyMessage; 

return (
    <div> 
     {bookList} 
    </div> 
);