Javascript 当试图在另一个组件内渲染组件时，道具将变得未定义

我试图在

ProfilePage

组件中呈现

图书列表

组件，但我遇到了一个自己无法解决的问题，主要是因为我根本不确定原因是什么。
以下是

配置文件页面

组件：

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);

我怀疑

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;

从“React”导入React；
从“./BookCard”导入BookCard；
const BookList=（{books，deleteBook}）=>{
控制台。日志（书籍）；
常量空消息=(

没有书。

);
常量图书列表=(
{books.map（book=>）}
);
返回(
{books.length？图书列表：emptyMessage}
)
};
BookList.propTypes={
书籍：React.PropTypes.array.isRequired，
deleteBook:React.PropTypes.func.isRequired
};
导出默认书目；

当查看Redux开发工具时，一切似乎都很好。操作已调度，状态已正确更新。

---

如果我添加了动作和相关的减速器会有帮助的话，我也可以添加它们，我只是不想把这篇文章写得太长

问题在于，在声明bookList对象时，您试图映射books对象。您尝试在不验证书籍是否已定义的情况下执行此操作

因此，本项目的工作流程如下：

声明图书列表->尝试映射图书对象

return->verify if books.length>0->render something

代码的解决方案可以是：

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>
);

const bookList=books&&books.length？(
{books.map（book=>）}
)：空消息；
返回(
{bookList}
);

在我看来好像

这个.props.profileUser.books

不是数组。能否显示console.log输出？

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>
);