javascript - × TypeError: Cannot read property 'original' of undefined React

Question

我正在尝试访问从 API 返回的数据的属性，我可以访问一些属性，但是当我尝试返回数据的图像属性时，我不断收到无法读取未定义的属性，图像属性是一个对象在数据中。这是下面的代码。

class GifDetail extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      gifImages: [],
    };
  }

  async componentDidMount() {
    const url = `https://api.giphy.com/v1/gifs/${this.props.match.params.id}?api_key=GuN18iG06KnZHBSYQR***Cw2YCZHN37`;
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    this.setState({ gifImages: data.data });
  }

  render() {
    const { gifImages } = this.state;

    return (
      <div>
         <img
          src={`${this.state.gifImages.images.fixed_height_small_still.url}`}
          width="100"
          className="img-fluid"
        /> //this line is returning undefined 

        <p>{gifImages.images.original}</p> // this is the line that is returning undefined 
        <p>{gifImages.username}</p>
        <p>{gifImages.url}</p>
        <p>{gifImages.title}</p>
      </div>
    );
  }
}

export default GifDetail;

标签： javascriptreactjs

Answer 1

以这种方式应用检查 gifImages.images && gifImages.images.original：

代替：

<p>{gifImages.images.original}</p>

写：

{ gifImages.images && <p>{gifImages.images.original}</p> }