reactjs - 如何对输入进行验证?
问题描述
我正在制作简单的应用程序,用户有机会找到电影(使用 OMDB API)。所以我做到了。但是当我进入一部不存在的电影时,我有一个未定义的地图错误。这是合乎逻辑的,因为不存在具有此类数据的数组。如何进行验证以通知用户错误。
搜索功能
const [state, setState] = useState({
s: '',
response: [],
selected: {}
});
const apiURL = 'http://www.omdbapi.com/?apikey=73f30b51'
const searchFilm = e => {
if(e.key === 'Enter'){
axios(apiURL + "&s=" + state.s).then(({data}) => {
let response = data.Search;
setState(prevState => {
return {...prevState, response: []},
{...prevState, response: response}
})
})
}
}
过滤器(地图错误)
const Result = ({response,openCurrentMovie}) => {
return(
<div className="results">
{response.map(result => (
<Movie key={result.imdbID} result={result} openCurrentMovie={openCurrentMovie}/>
))}
</div>
)
}
解决方案
如果response = data.Search;
未定义,您可以设置错误状态,并使用它向您的用户呈现消息。
const [error, setError] = useState(null); // use error value to render a component to show error
const searchFilm = e => {
if(e.key === 'Enter'){
axios(apiURL + "&s=" + state.s).then(({data}) => {
let response = data.Search;
if(!response){
setError(true) // setting the error as true. You can give some specific message as well
}
setState(prevState => {
return {...prevState, response: response}
})
})
}
}
推荐阅读
- javascript - 如何抑制 SonarJS 中单行的错误?
- node.js - Nodejs 无法读取 addEventListner Null 的属性
- rest - ATG REST API - 如何发送不同的 HTTP 状态码而不是 500
- c# - 正确处理 SciChartSurface
- c# - Unity C# 如何使用 JSON 实用程序从 http 服务器读取 Json 数据
- c++ - 如何在 Mac 上动态链接 cppunit?
- mysql - Cannot create trigger - bad syntax
- java - Spring Data JPA:将@EnableJpaRepositories basePackages 配置外部化到属性文件
- node.js - 错误 404.4 您要查找的资源没有与之关联的处理程序
- java - While 循环 While 字符串不等于多个其他字符串 (Java)