僅當用戶在 React 中按搜索或 Enter 時才獲取數據？

Question

我已經設置了一個搜索欄來從后端獲取數據並返回它。

代碼：

const App = () => {

const[datas,setDatas] = useState([])   //NOthing to do with this.

const [space,setSpace] = useState(null)
const [print, setPrint] = useState(false)


function getData(val){
  console.log(val.target.value)
  setSpace(val.target.value);
  setPrint(false)
}

console.log(space)  //Returning inputted text in console. Works well

  useEffect(() => {
    const fecthPosts = async () => {
      let initial_url = `http://localhost:4000/search` 
      let url = initial_url + "?text=" + space  
       
       const res = await fetch(url);
       const {result} = await res.json();

     setDatas(result);
    fecthPosts();
  },[space]);

return(
<div className="App">
     {                  //Displaying on search
        print?
         <>
        <h2>{space}</h2>  //submited text
        <div> 
       {results.map((field) => 
       <p>{field.title}</p> 
       <p>{field.author}</p> 
       )}
        </div>
        </>
        :null
      }
   <input type="text" onChange={getData} />
 <button onClick={() => setSpace(true)}>search</button>
</div>
  )
 }
};

export default App;

現在，這段代碼工作得很好。 但是當我點擊Network Tab ，

它從我輸入的每個文本中獲取數據。 onChange問題

search?text=s
search?text=sa  
search?text=sam 
search?text=sams
search?text=samsu   
search?text=samsun
search?text=samsung

我不希望這種情況發生，因為我要發送的請求數量有限。

任何人都可以幫助解決這個問題。我嘗試了幾件事，但沒有任何效果......

注意：我不能使用Timeout和任何其他有效的方法......只有在用戶press enter或click the button時才搜索或獲取數據。

Answer 1

您可以在很短的超時時間內（例如，在輸入后 2 秒不活動后）使用 ref 進行提取。

也不要忽略可能的錯誤 - 應始終避免未經處理的拒絕。

const timeoutRef = useRef();
useEffect(() => {
    const doFetch = () => {
        const url = 'http://localhost:4000/search?text=' + space
        fetch(url)
            .then(res => res.json())
            .then(({ result }) => setDatas(result))
            .catch(handleErrors); // don't forget this
    };
    clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(doFetch, 2000);
}, [space]);

Answer 2

我認為代碼存在一些問題，例如在顯示搜索結果時，如果我理解正確的話：

{results.map((field) => 

應該

{datas.map((field) => 

對？

對於您目前的問題，

1. 每次更改輸入文本時，您都會調用搜索 API。
2. 僅在單擊search按鈕時顯示搜索結果。

那么為什么不只在點擊search按鈕時觸發 API 調用呢？

Answer 3

您可以使用 denounce，僅在 n 秒后調用搜索 API。