Я новичок в React и создаю веб-сайт, на котором пользователь может выполнять поиск по запросу и отображать результаты.
У меня есть один компонент под названием: Searchbar
, который содержит две функции:
1) Пользователь пишет запрос, который отправляется через POST-запрос axios на бэкэнд, когда пользователь нажимает ввод.
2) Бэкэнд выполняет поиск по относительному запросу и отправляет результаты обратно через запрос axios GET.
Следовательно, порядок следующий: postQuery()-->getQueryResult()
, поэтому я думаю, что postQuery()
создает обещание, которое, если оно разрешено, позволяет запускать getQueryResult()
. Однако я получаю:
TypeError: невозможно прочитать свойство then of undefined
Ошибка в строке 38: вернуть 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
нет оператора возврата, поэтому он возвращает 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
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.