为什么在react中使用history.push（）时重新加载页面

Question

我这样使用history.push，但我的回复未在列表中显示，页面开始重新加载：

 Searchinp = (event) => {
        event.preventDefault()
        const props = this.props
            console.log(props)
        const searchValue = event.target.search.value 
        props.history.push(`?phrase=${searchValue}`) 
       reqhandler({
         url: exporturl.getportofoliorequest(),
         method : "get",
         headers : {
             "Authorization": `Bearer ${gettoken().acctoken}`       
          },
          params : {
              lang : getLang(),
              phrase : event.target.search.value
          }
         }).then(res => {
             this.setState({
                 ...this.state,
                 resumeList : res.data.results
             })
             console.log(res.data)  
             }).catch(err => {
                 console.log("Error :" , err)
             })
        }     

请帮助我。

Answer 1

如果要在输入更改时更新url搜索参数，则应改为在componentDidUpdate生命周期中编写请求处理程序

Searchinp = (event) => {
   event.preventDefault()
   const props = this.props
   const searchValue = event.target.search.value 
   props.history.push(`?phrase=${searchValue}`) 

}

---

requestHandler = (phrase) => {
  reqhandler({
     url: exporturl.getportofoliorequest(),
     method : "get",
     headers : {
         "Authorization": `Bearer ${gettoken().acctoken}`       
      },
      params : {
          lang : getLang(),
          phrase,
      }
     }).then(res => {
         this.setState({
             ...this.state,
             resumeList : res.data.results
         })
         console.log(res.data)  
     }).catch(err => {
         console.log("Error :" , err)
     })
}
componentDidUpdate(prevProps) {
    // get phrase from prev and current props
   if(prevPhrase !== phrase) {
        // request handler debounced
        this.debouncedRequestHandler();
   }
}