javascript - 如果不满足条件，我可以为Axios Get Method写一个if/else语句吗？

Question

我正在使用 Axios 在 ReactJS 中获取 API 数据。我设置了一个搜索查询，它将接受用户输入并将其与数据响应设置为状态的 API 相匹配。我遇到一个问题，如果我尝试接收的数据在 API 中不存在，页面将返回此错误:

Unhandled Rejection (TypeError): Cannot read property 'medium' of null

  32 |     title: response.data.name,
  33 |     summary: response.data.summary,
  34 |     rating: response.data.rating.average,
> 35 |     image: response.data.image.medium,
  36 |     genre: response.data.genres,
  37 |   });
  38 | })

有没有办法在 GET 请求中写入 if/else 语句来解决这个问题？

import React, { Component } from 'react';

import SearchResults from '../SearchResults/SearchResults';
import AddButton from '../AddButton/AddButton';
import axios from 'axios';

class Searchbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchTerm: ' ',
      title: ' ',
      summary: ' ',
      rating: ' ',
      image: ' ',
      genre: [],
    }
  }

  componentWillMount() {
    this.search();
  }

  updateSearchHandler = (event) => {
    this.search(this.refs.query.value);
  }

  search(query = "stranger-things") {
    const url = `http://api.tvmaze.com/singlesearch/shows?q=${query}`;
    axios.get(url).then(response => {
      this.setState({
        title: response.data.name,
        summary: response.data.summary,
        rating: response.data.rating.average,
        image: response.data.image.medium,
        genre: response.data.genres,
      });
    })
  }

  render() {
    let editedSummary = this.state.summary.replace(/(<p>|<b>|<\/p>|<\/b>)/g, '')
    let spiltGenre = this.state.genre.join(', ');

    return(
      <div>
        <input
          type="text"
          ref="query"
          onChange={this.updateSearchHandler}/>

        <SearchResults
        showTitle={this.state.title}
        showSummary={editedSummary}
        showRating={this.state.rating}
        showImage={this.state.image}
        showGenre={spiltGenre}/>

      <AddButton
        showTitle={this.state.title}
        showGenre={spiltGenre}/>
      </div>
    )
  }
}

  export default Searchbar;

Answer 1

选项 1 - 三元运算符

您可以使用三元运算符来测试是否定义了 response.data.image。如果是，则返回 response.data.image.medium，如果不是，则返回 null 或其他值。三元运算符的工作方式如下:

const isTrue = true;
const newVariable = (isTrue ? 'Its true' : 'Its false');

如果 isTrue 为 true，则 newVariable 为 Its true。如果 isTrue 为 false，则 newVariable 为 Its false。

例子

这是一个简化的例子:

const response = {
  data: {
    name: "My Name",
    summary: "My Summary",
    rating: {
      average: "My Average"
    },
    genres: "My genres"
  }
}

const state = {
  title: response.data.name,
  summary: response.data.summary,
  rating: response.data.rating.average,
  image: response.data.image ? response.data.image.medium : "No image",
  genre: response.data.genres,
};

console.log(state);

选项 2

这是使用 Object Destructuring 的另一种方法.解构允许我们从对象属性名称创建变量，在需要时重命名任何变量，并在属性未定义的情况下定义默认值。要使用它，我们会将 response.data 解构为我们想要的 5 个属性:

• 将 name 重命名为 title
• 将summary保留为summary
• 将 rating.average 重命名为 rating
• 将image.medium重命名为medium，默认值为null
• 将 genres 重命名为 genre

然后我们需要将这些新常量传递给状态对象。

我提供了 2 个示例来展示它如何处理有图像和无图像的响应。首先是带有 image 属性的响应。

例子1

const response = {
  data: {
    name: "My Name",
    summary: "My Summary",
    rating: {
      average: "My Average"
    },
    image: {
      medium: "My image"
    },
    genres: "My genres"
  }
};

const {
  name: title,
  summary,
  rating: {average: rating},
  image: {medium: image} = {medium: null},
  genres: genre
} = response.data;

const newState = {
  title,
  summary,
  rating,
  image, 
  genre
}

console.log(newState);

例子2

现在没有 image 属性的响应。

const response = {
  data: {
    name: "My Name",
    summary: "My Summary",
    rating: {
      average: "My Average"
    },
    genres: "My genres"
  }
}

const {
  name: title,
  summary,
  rating: {average: rating},
  image: {medium: image} = {medium: null},
  genres: genre
} = response.data;

const newState = {
  title,
  summary,
  rating,
  image,
  genre
}

console.log(newState);