反应：图像 src 没有通过 API 走路径。图像未定义答案

【问题标题】：React: image src is not taking path via API. image is undefined反应：图像 src 没有通过 API 走路径。图像未定义
【发布时间】：2021-11-13 02:14:20
【问题描述】：

我是 Reactjs 的新手。我无法从 API 中提取图片网址。如果stackoverflow中已经存在类似类型的线程，我真的很抱歉。完整代码如下。我使用的API是：https://api.thecatapi.com/v1/breeds

import React, { Component } from "react";
import ReactDOM from "react-dom";

const Cat = ({
  cat: {name, image},
}) => {
  return(
    <div className='catMain'>
      <div className='catImage'>
        <img src={image.url} alt={name} />
      </div>
    </div>
  )
}

class App extends Component {
  state = {
    data: [],
  };
  componentDidMount() {
    this.fetchCatData();
  }
  fetchCatData = async () => {
    const url1 = "https://api.thecatapi.com/v1/breeds"
    const response = await fetch(url1)
    const data = await response.json()
    this.setState({
      data,
    })
  }
  render() {
    return (
      <div className='main'>
        <div className="cats">
          <div className="catsInfo">
            {this.state.data.map((cat) => (
              <Cat cat={cat}/>
            ))}
          </div>
        </div>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

【问题讨论】：

name 工作了吗？还是没有？
名称有效

标签： javascript reactjs json api

【解决方案1】：

您假设每只猫都有一张图像，但事实并非如此，因此您可以预先过滤空图像（有很多解决方案，也可以进行条件渲染）：

// cat.image is an object, which is truthy value therefore you can filter by it.
this.state.data.filter(cat => cat.image).map(cat => <Cat cat={cat} />)

// OR, conditional rendering
this.state.data.map(cat => cat.image && <Cat cat={cat} />)

// Or in the component itself, etc.
const Cat = ({ cat: { name, image } }) => {
  return image ? (
    <div className="catMain">
      <div className="catImage">
        <img src={image.url} alt={name} />
      </div>
    </div>
  ) : (
    <Placeholder />
  );
};

【讨论】：

【解决方案2】：

如果您想显示每只猫，即使它们可能没有图像，您可以这样做：

const Cat = ({ cat: { name, image } }) => {
  return (
    <div className="catMain">
      {image && (
        <div className="catImage">
          <img src={image.url} alt={name} />
        </div>
      )}
    </div>
  );
};

然后您可以只显示您想要的关于猫的任何其他内容，而不必担心图像问题。

【讨论】：