javascript - TypeError：无法读取未定义的属性'then'

问题描述

我是 React 新手，我正在创建一个网站，用户可以在其中搜索查询并显示结果。

我有一个组件叫做：Searchbar它包含两个功能：

1）用户写一个查询，当用户回车时，通过axios POST请求发送到后端。

2) 后端搜索相关查询，并通过 axios GET 请求发回结果。

因此顺序是：postQuery()-->getQueryResult()所以我认为这postQuery()会创建一个承诺，如果解决，则允许getQueryResult()运行。但是我得到：

TypeError：无法读取未定义的属性“then”

第 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;

标签： javascriptreactjs

没有 return 语句，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 - TypeError：无法读取未定义的属性'then' - React Hooks

问题描述

解决方案

推荐阅读