Javascript 为什么我无法访问此对象的数据属性？

我正在进行我的第一个React项目，在这个项目中，我将图像存储在MongoDB上。（我知道这不是最佳做法，但无论如何……）

我的mongoDB对象有很多属性，包括一个名为“coverImage”的属性，它是一个包含两个属性的对象：type和data，看起来像这样：{type:buffer，data:Array（6450）

访问数据属性时遇到问题。当在axios中将数据属性的值记录到控制台时，缓冲区将毫无问题地记录到控制台

同时，当试图访问这个存储在状态中的值时，我收到一个TypeError：“无法读取未定义的属性数据”

我做错了什么

请参阅下面我的代码：

    import React, { Component } from "react";
    import axios from "axios";
    // import BookCover from "../utilities/BookCover";

    class BookPage extends Component {
      constructor(props) {
        super(props);

        this.state = {
          book: ""
        };
      }

      componentDidMount() {
        axios
          .get("http://localhost:3000/books/" + this.props.match.params.id)
          .then(res => {
            console.log("first object", res.data.coverImage); // Returns fist object, {type: Buffer, data: Array(6450)}
            console.log("buffer", res.data.coverImage.data); // Returns buffer (6450) [255, 216 ...]
            this.setState({
              book: res.data
            });
          });
      }

      bookDetails() {
        console.log("second object", this.state.book.coverImage); // Returns second object, {type: Buffer, data: Array(6450)}
        // console.log(this.state.book.coverImage.data); // Returns TypeError: "Cannot read property data of undefined"
        return (
          <div>
            <h1>{this.state.book.title}</h1>
            <p>Author: TBD</p>
            <p>Publish Date: {this.state.book.publishDate} </p>
            <p>Need to Read: {String(this.state.book.unread)} </p>
            <p>Page Count: {this.state.book.pageCount} </p>
            <p>Description: {this.state.book.description} </p>
          </div>
        );
      }

      render() {
        return (
          <div>
            <div>{this.bookDetails()}</div>
          </div>
        );
      }
    }

    export default BookPage;

从“React”导入React，{Component}；
从“axios”导入axios；
//从“./实用程序/封面”导入封面；
类BookPage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
书：“
};
}
componentDidMount（）{
axios
.get（“http://localhost:3000/books/“+this.props.match.params.id）
。然后（res=>{
log（“第一个对象”，res.data.coverImage）；//返回第一个对象，{type:Buffer，data:Array（6450）}
console.log（“buffer”，res.data.coverImage.data）；//返回buffer（6450）[255，216…]
这是我的国家({
书籍：res.data
});
});
}
书籍详情（）{
log（“第二个对象”，this.state.book.coverImage）；//返回第二个对象，{type:Buffer，data:Array（6450）}
//console.log（this.state.book.coverImage.data）；//返回TypeError:“无法读取未定义的属性数据”
返回(
{this.state.book.title}
作者：待定

发布日期：{this.state.book.publishDate}

需要阅读：{String（this.state.book.unread）}

页面计数：{this.state.book.pageCount}

描述：{this.state.book.Description}

);
}
render（）{
返回(
{this.bookDetails（）}
);
}
}
导出默认书页；

您需要将其转换为json try

res.json（）

您是否尝试控制台“type”console.log（this.state.book.coverImage.type）？由于异步调用尚未完成，并且book还不可用，请执行一些空检查

if（book.coverImage）return existing logic else return loading

@Jayce444运行正常！是的，我注意到我的第一个console.log-in-bookDetails被调用了两次。第一次它没有定义，但第二次它在coverImage对象上突然停止。我知道这是正常行为，因为每次调用setState时，页面都会重新呈现。无论如何，比非常感谢！！@Jayce444可以！我同意，将其设置为空字符串没有意义。我一直在空字符串/对象/数组之间切换，以查看是否有任何影响。显然没有。再次感谢您需要将其转换为json try

res.json（）

您尝试过控制台“type”console.log（this.state.book.coverImage.type）吗？只需进行一些空检查，因为异步调用尚未完成，并且book还不可用

if（book.coverImage）return existing logic else return loading

@Jayce444运行正常！是的，我注意到我的第一个console.log-in-bookDetails被调用了两次。第一次它没有定义，但第二次它在coverImage对象上突然停止。我知道这是正常行为，因为每次调用setState时，页面都会重新呈现。无论如何，比谢谢！！@Jayce444就可以了！我同意，将其设置为空字符串没有意义。我一直在空字符串/对象/数组之间切换，看看这是否有任何影响。显然没有。再次感谢