Я новичок в 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
Prova12 13 Окт 2019 в 03:57

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
1
traktor 13 Окт 2019 в 01:09