我正在使用 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;
最佳答案
选项 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);
关于javascript - 如果不满足条件,我可以为Axios Get Method写一个if/else语句吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47762548/