仅当用户在 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。