如果不满足条件，我可以为 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);

Answer 2

你可以在axios的回调中做if/else。

我愿意：

image: response.data.image != null ? response.data.image.medium: '' ,

或者使用 if/else:

let imageMedium = '';
if (response.data.image != null) {
   imageMedium = response.data.image.meduim
}