时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“缩略图”

javascript - TypeError：无法读取未定义的属性“缩略图”

问题描述

我可以访问其余的属性而不是一个。我没明白是什么问题。

我试过了：

this.props.data.imageLinks.thumbnail

this.props.data.imageLinks[thumbnail]

this.props.data.imageLinks["thumbnail"]

但是当我尝试时，其他属性会吐出正确的值：{this.props.data.title}, {this.props.data.author}.

class Book extends React.Component {

  render() {
    console.log('prop',this.props.data.imageLinks)

    return (
      <div key={this.props.data.id}>
        <div className="book">
          <div className="book-top">
            <div 
              className="book-cover"
              style={{ 
                width: 128, 
                height: 192, 
                backgroundImage: `url(${this.props.data.imageLinks.thumbnail})`
              }}
            ></div>
            <DropDownList/>
          </div>
          <div className="book-title">{this.props.data.title}</div>
          <div className="book-authors">{this.props.data.author}</div>
        </div>
        <div>
          {/*BooksAPI.getAll().then(function(res){console.log(res)})*/}
        </div>
      </div>
    )
  }
}

这个对象看起来如何

目的

标签： javascriptreactjs

解决方案

我有一种新的方法来完成这项工作。基本上我制作了一个不同的渲染组件，并通过道具传递属性。然后我在映射数组的组件中使用了 try 和 catch，在发送道具之前，我尝试出错，如果没有错误，它通常会传递图像链接。如果有错误，我会将图像属性传递为“”，这基本上意味着 img 标签中的空字符串。我会附上代码。它的粗略代码，带有console.logs，但主要是在try and catch中

主驱动代码

import React, { useEffect, useState } from 'react';
import Details from './bookDetails';
import './books.css'

export default function Books2() {

    const [bookName, setName] = useState("a");
    const [load, setLoad] = useState(false)
    const [itemArray, setArray] = useState([]);

    useEffect(() => {
        loadData();
    }, [])
    
    async function loadData() {
        setLoad(true);
        // console.log(bookName)
        await fetch("https://www.googleapis.com/books/v1/volumes?q=intitle:"+bookName)
            .then(response => response.json())
            .then(data => setArray(data.items))
        setLoad(false)
    }
    
    function handleChange(event) {
        // console.log(event.target.value)
        setName(event.target.value)
    }

    function handlePress() {
        loadData();
    }

    // console.log(itemArray)

    var className = (load===true) ? "loading" : "null"

    return (
        <div>
            <h1>Hello</h1>
            <input placeholder="book name" value={bookName} onChange={handleChange} />
            <button onClick={handlePress}>Search</button>
            <h3 className={className}>Loading...</h3>
            {/* <input placeholder="name of book" value={} /> */}
            {itemArray.map(book => {
                {/* console.log(book.volumeInfo.imageLinks) */}
                try{
                return(
                <Details 
                    key={book.id}
                    bookName={book.volumeInfo.title}
                    bookYear={book.volumeInfo.publishedDate}
                    bookDesc={book.volumeInfo.description}
                    bookLink={book.volumeInfo.infoLink}
                    bookImg={book.volumeInfo.imageLinks.smallThumbnail}
                />
                )}
                catch(err) {
                    <Details 
                    key={book.id}
                    bookName={book.volumeInfo.title}
                    bookYear={book.volumeInfo.publishedDate}
                    bookDesc={book.volumeInfo.description}
                    bookLink={book.volumeInfo.infoLink}
                    bookImg={""}
                />
                }
            })}
            {/* <button onClick={handlePress}>Search</button> */}
        </div>
    )
}

用于渲染代码的组件

import React from 'react';

export default function Details(props) {
    return(
        <div>
            <h1>{props.bookName}</h1>
            <a href={props.bookLink} target='_blank'>Link to book</a>

            <img src={props.bookImg} className="img"/>

            <h3>{props.bookYear}</h3>
            {/* <h4>{bookPage}</h4> */}
            {/* <h5>{bookRating}</h5> */}
            <p>{props.bookDesc}</p>
        </div>
    )
}

推荐阅读