时间戳

首页 > 解决方案 > 在 API 调用中无法访问图像 URL

javascript - 在 API 调用中无法访问图像 URL

问题描述

我正在尝试在我的 react 项目的 API 调用中访问图像 URL，但是，我收到的错误消息是 URL 未定义为错误。试图找到错误但找不到。请协助帮助我知道我做错了什么。

下面是我的代码。给我一个问题的地方被注释掉了。

import React, { Component } from 'react'
import axios from "axios";
import { Card} from "react-bootstrap";

export default class App extends Component {
  state = {
    data: []
  };

  componentDidMount() {
    this.fetchCountryData();
  }
  fetchCountryData = async () => {
    const url = "https://api.thecatapi.com/v1/breeds";
    try {
      const response = await axios.get(url);
      const data = await response.data;
      this.setState({
        data
      });
     
    } catch (error) {
      console.log(error);
    }
  };
  render() {
    return (
      <div className="App">
      <h1>React Component Life Cycle</h1>
      <h1>Calling API</h1>
      <div>
        {
          this.state.data.map((item, id) => (
          <div key={id}>
            {console.log(item)}



            <Card style={{ width: '18rem' }}>
            {/* <Card.Img variant="top" src={item.image.url} /> This part is giving me the problem  */}
        <Card.Body>
        <Card.Title>{item.name}</Card.Title>
        <Card.Text>
        {item.origin}
      </Card.Text>
      <Card.Text>
      {item.temperament} 
      </Card.Text>
      <Card.Text>
      {item.weight.metric} 
      </Card.Text>
      <Card.Text>
      {item.description} 
      </Card.Text>
    {/* <Button variant="primary">Go somewhere</Button> */}
    </Card.Body>
  </Card>









            {/* { <img src={item.image.url} alt=""/> }  Please why is this not working ? */}
            {/* {item.name} <br/>
            {item.origin} <br/>
            {item.temperament} <br/>
            {item.life_span} <br/>
            {item.weight.metric} <br/>
            {item.description} <br/> */}

          </div>
          ))
        }
        
      </div>
    </div>
    )
  }
}

标签： javascriptnode.jsreactjs

解决方案

这是有趣的。我的第一个想法是，当组件呈现时，item.image对象不存在，这就是为什么您无法访问未定义对象中的属性的原因。但后来我意识到它不会抛出item.weight.metric. 我将等着看其他人对此有什么看法。

但是，基本的解决方法是您可以简单地使用图像链接作为item.image && item.image.url或很快item.image?.url，这样它就不会抛出。

推荐阅读