为什么当我在 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();
}
}