为什么当我在 react 中使用 history.push() 时页面会重新加载答案

【问题标题】：why page reload when i use history.push() in react为什么当我在 react 中使用 history.push() 时页面会重新加载
【发布时间】：2019-12-23 06:46:08
【问题描述】：

我像这样使用 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)
             })
        }

请帮帮我。

【问题讨论】：

您能补充更多信息吗？比如你当前的 URL 是什么以及页面重新加载时它会变成什么
我在 localhost:3000/dashboard 中的当前 url 和成为 url 是 locolhost:3000/dashboard?phrase=somestring ，我用它来搜索输入请求

标签： reactjs browser-history

【解决方案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();
   }
}

【讨论】：

我不明白该怎么办，请给我更多信息。谢谢