如果用户按搜索或在 React 中输入，则仅获取数据？

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

您可以使用 ref 在短暂的超时时间内（例如，在键入后 2 秒不活动后）获取。

也不要忽略可能的错误 - 应始终避免未处理的拒绝。

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。