Javascript TypeError:无法读取属性'；书籍'；在BookDetails.render中未定义的

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

this.renderList（）

以上是我得到的数据

所以在render（）上 我试过console.log

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

上面的代码抛出

TypeError:无法在BookDetails.render读取未定义的属性“book”

因此，似乎在render（）中没有定义book，但不确定如何定义要呈现（）的book属性

renderList（）{
返回此.props.list.map（（list）=>{
console.log（“list”，list.book_id）；
log（“params”，this.props.params.id）
if（list.book_id==parseInt（this.props.params.id））{
console.log（“真”）；
返回{
图书：list.book\u id
}
}
})
}
render（）{
const{post}=this.props；
const{user}=this.props；
const{list}=this.props；
const data=this.renderList（）[0]。列表；
如果（！post）{
返回加载。。。
}
如果（用户）{
log（this.renderList（））；
console.log（this.renderList（）[0].book）；
返回(
标题：{post.Title}
页面：{post.Pages}
审查：
{this.props.addToMyPage(
{
userId:user.user.user\u id，
bookId:post.book\u id
}
)}}>
将此添加到我的页面
)
}

我想推荐几件事

首先您的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;
}

第二步首先验证此数据是否确实存在。这可能是因为数据尚未加载，而您正试图在数据实际传入之前访问它

Third在搜索多个嵌套对象以删除JS异常时，应使用帮助器方法获取值。我用lodash来做这个

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

我强烈建议您使用类似Lodash get方法的方法从可能抛出js错误的内容中获取值

第四个在调用渲染列表之前，您应该确保有一个列表

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

---

这个数据加载是异步的吗？这可能是因为它最初不存在，然后才渲染。感谢您的输入。从中我们学到了很多@约翰鲁德尔有一件事我不明白，那就是什么时候应该在forEach上使用map？@Yh1234 map为数组中的每个项返回一个值。因此，如果要将数组中的每个项渲染到react组件中，请使用贴图。如果您没有从映射中返回某些内容，则未定义将插入到数组中。因此，当您的逻辑仅与

props.params.id

匹配时，它看起来像是

[undefined，undefined，{…data here}，undefined]

，您需要forEach，因为您只需要呈现项目数组的子集。这就是为什么要使用elems数组变量，并在需要时推送它。

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