查询接口调用触发useEffect

Question

我正在尝试使用React Hooks构建一个搜索组件，其主要功能是当我将一个单词放入我的输入中时，我使用该单词进行API调用，它将返回匹配的单词

现在，该组件如下所示

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './SearchBar.css';

export function SearchBar() {
  const [query, setQuery] = useState('');
  const [searchResults, setSearchResults] = useState([]);
  const handleChange = event => {
    setQuery(event.target.value);
    console.log(event);
  };

  useEffect(() => {
    const fetchCities = query => {
      const uri = 'http://0.0.0.0:8000/v1/autocomplete/';
      axios
        .get(uri, {
          params: {
            q: query
          }
        })
        .then(response => {
          const data = response.data.filter(name =>
            name.toLowercase().includes(query)
          );
          setSearchResults(data);
          console.log('searchResults' + searchResults);
        })
        .catch(err => {
          console.log(err); //I know this is nothign but im running out of time tbh
        });
    };

    fetchCities();
  }, [query]);

  const handleSubmit = evt => {
    /*  evt.preventDefault();
    alert(apiCall());
    reset(); */
  };
  return (
    <form onSubmit={handleChange} className='display'>
      <input
        type='text'
        placeholder='Search'
        onChange={event => setQuery(event.target.value)}
      />
      <input type='submit' value='Submit' className='resize' />
      <ul>
        {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
      <div></div>
    </form>
  );
}

现在，在页面加载时，我得到了这个错误

xhr.js:166 GET http://0.0.0.0:8000/v1/autocomplete/ 400 (Bad Request)
dispatchXhrRequest @ xhr.js:166
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:49
Promise.then (async)

当我只想在提交表单时进行API调用时。有什么帮助吗？

Answer 1

我对你的代码样本做了一点更新：

在我看来，主要问题是抓取url没有运行。

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [query, setQuery] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const handleChange = event => {
    setQuery(event.target.value);
  };

  useEffect(() => {
    const fetchCities = qry => {
      const uri = "https://www.mocky.io/v2/5df693273400002900e5a5f3";

      axios
        .get(uri, {
          params: {
            q: qry
          }
        })
        .then(response => {
          const data = response.data.tags.filter(name =>
            name.toLowerCase().includes(qry)
          );
          setSearchResults(data);
        })
        .catch(err => {
          console.log("error", err); //I know this is nothign but im running out of time tbh
        });
    };

    fetchCities(query);
  }, [query]);

  const handleSubmit = evt => {
    evt.preventDefault();
  };
  return (
    <form method="POST" onSubmit={handleChange} className="display">
      <input
        type="text"
        placeholder="Search"
        onChange={event => setQuery(event.target.value)}
      />
      <input
        type="submit"
        onClick={handleSubmit}
        value="Submit"
        className="resize"
      />
      <ul>
        {searchResults.map(item => (
          <li>{item}</li>
        ))}
      </ul>
      <div />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

useEffect将在组件首次挂载时触发，因此您需要在其内部使用一条if语句来决定是否要进行API调用：

useEffect(() => {
  if (query === "") return

  const fetchCities = query => {
    // ...
  }
  fetchCities()
}, [query])

但是，如果您只想在提交表单时触发API调用，我会简化您的代码：

function SearchBar() {
  const [query, setQuery] = useState('')
  // ...
  const handleSubmit = (event) => {
    event.preventDefault()

    const uri = '...'
    axios.get(uri, { params: { q: query } })
      .then(response => {
        // ...
        setSearchResults(data)
      })
      .catch(err => { ... })
  }

  const handleQueryChange = (event) => {
    setQuery(event.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Search" onChange={handleQueryChange} />
      <input type="submit" value="Submit" /> 
      {...}
    </form>
  )

这样，您就不会在每次向search字段中键入新字符时都调用您的API端点。当您单击submit时，它将只被调用一次。

有关示例，请参阅以下CodeSandbox链接：

• CodeSandbox React hook form example