TypeError:无法读取未定义的属性“then”-React Hooks
2019-10-13
2185
我是 React 新手,我正在创建一个网站,用户可以在其中搜索查询并显示结果。
我有一个名为:
Searchbar
的组件,它包含两个函数:
1) 用户编写查询,当用户按下 Enter 键时,该查询通过 axios POST 请求发送到后端。
2) 后端搜索相关查询并通过 axios GET 请求将结果发送回。
因此顺序为:
postQuery()-->getQueryResult()
所以我认为
postQuery()
创建了一个承诺,如果得到解决,则允许
getQueryResult()
运行。
但是我得到:
TypeError: Cannot read property 'then' of undefined
Error on line 38: return postQuery(query).then(() => getQueryResult());
我的代码是:
function Searchbar() {
const [query, setQuery] = useState("");
const [results, setResults] = useState(["myemptyinitiallist"]);
function postQuery(query) {
var myParams = {
data: query
}
axios.post('http://localhost:5000/api/query', myParams)
.then(function(response){
console.log("Yes, it sends the query in JSON format to Flask");
})
.catch(function(error){
console.log(error, "Error on AXIOS post");
});
} // Enf of postQuery
function getQueryResult() {
(axios.get('http://localhost:5000/api/query')
.then(function (response) {
setResults(response.data); //set the value
console.log(results)
}))
} // End getQueryResult()
function handleEnter(query){
if (query != "") {
return postQuery(query).then(() => getQueryResult());
} else {
alert("The search query cannot be empty")
}
} // End of function handleEnter()
return(
<div>
<SearchBar
onChange={(event) => setQuery(event)}
onRequestSearch={() => handleEnter(query)}
style={{
marginTop: 200,
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: 800,
}}
/>
<ResultList/>
</div>
)
}
export default Searchbar;
1个回答
postQuery
中没有 return 语句,因此它返回
undefined
。
此外,
catch
子句默认履行其返回的承诺。要允许返回的承诺也被捕获,请在
catch
回调中重新抛出错误。
尝试
function postQuery(query) {
var myParams = {
data: query
}
return axios.post('http://localhost:5000/api/query', myParams)
.then(function(response){
console.log("Yes, it sends the query in JSON format to Flask");
})
.catch(function(error){
console.log(error, "Error on AXIOS post");
throw error; // don't fulfill returned promise
});
} // End of postQuery
traktor
2019-10-13