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

实施例

这是一个简单的例子：

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

选项2

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

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

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

我提供了2个示例来说明如何处理带图像和没有图像的响应。首先是image属性的回复。

示例1

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

示例2

现在是没有image属性的回复。

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

我愿意：

function MYTEST() 
  local x = 1
  if x==1 then
    print("x==1")
  else if x==0 then
      print("x==0")
    end
  end
end

或使用if / else：

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