Javascript 如何处理道具历史位置搜索参数？

所以我有一个用React制作的网站，在那里我有不同的组件，其中一个是带有搜索字段的导航栏

class SearchBar extends Component{

constructor(props){
    super(props);
    this.state = {
        query:''
    }
}

changeHandler = (e)=>{
    this.setState(
        {query: e.target.value}
    )
}

enterHandler = (e)=>{
    if(e.key ==='Enter'){
        var q = `?q=${(this.state.query).trim().replace(new RegExp(' ','gi'),'%20')}`
        if(this.props.history.location.pathname === '/search'){
            this.props.history.location.search = q
        }else{
        this.props.history.push({
            pathname: '/search',
            search: q
        })
    }
        
    }
}

render(){
    return (
        <TextField placeholder="Search" InputProps={{
            startAdornment:(
                <InputAdornment position="start">
                    <SearchIcon/>
                </InputAdornment>
            )
        }}
        required
        value={this.state.query}
        onChange={this.changeHandler}
        onKeyPress={this.enterHandler}
        ></TextField>
    )
}

类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
查询：“”
}
}
changeHandler=（e）=>{
这是我的国家(
{query:e.target.value}
)
}
enterHandler=（e）=>{
如果（e.key=='Enter'）{
var q=`？q=${（this.state.query）.trim（）.replace（新的RegExp（''gi'），'%20'））`
if（this.props.history.location.pathname==='/search'）{
this.props.history.location.search=q
}否则{
这个。道具。历史。推({
路径名：'/search'，
搜索：q
})
}
}
}
render（）{
返回(
)
}

}

还有一个搜索组件，我在其中将查询提取到数据库并返回

class Search extends Component{
constructor(props){
    super(props)
    this.state={
        posts:{}
    }
}

componentDidMount(){
    fetch(`/searchpost${this.props.location.search}`).then(res=> res.json()).then(searchs => this.setState({posts:searchs},()=>{
        console.log('Fetched ...',searchs)
    })).catch(err=>{
        console.log(err.message)
    })
}


render(){

    return <div>hemlo</div>
}

类搜索扩展组件{
建造师（道具）{
超级（道具）
这个州={
职位：{}
}
}
componentDidMount（）{
fetch（`/searchpost${this.props.location.search}`）。然后（res=>res.json（））。然后（searchs=>this.setState（{posts:searchs}，（）=>{
console.log（'Fetched…'，search）
})).catch（错误=>{
console.log（错误消息）
})
}
render（）{
返回亨洛
}

}

问题是，如果我在另一条路线上，例如在家里等，这种方法会非常有效。

---

但是，如果我已经在搜索组件中，并且我在该路径中使用了搜索字段，它不会显示任何内容。当我将location.search更改为新查询时，站点是否会更新并获取新查询。对不起，我不清楚路由或反应本身。提前谢谢

您应该将新的搜索数据推送到历史记录中，而不仅仅是将其分配给props对象。换句话说，请删除以特殊方式处理搜索的if语句。如果您不希望搜索路径多次出现在历史堆栈中，请使用replace而不是push。谢谢！，我将尝试按照这些指导原则重构它。在任何情况下，是否有任何文档可以让我阅读历史堆栈以及它是如何精确工作的？。我用谷歌搜索过，但信息要么太少，要么不是我真正搜索到的。历史记录上有文档链接。除非类组件检测到其道具有变化，否则不会重新发布（这是一个肤浅的比较，即第一级的引用和基元）。当您直接更改

this.props.history.location.search=q

React时，您不知道历史已经更改。当您通过history.push或history.replace等更改时，路由器正在侦听这些更改并处理道具更新。您应该将新的搜索数据推送到历史记录中，而不仅仅是将其分配给道具对象。换句话说，请删除以特殊方式处理搜索的if语句。如果您不希望搜索路径多次出现在历史堆栈中，请使用replace而不是push。谢谢！，我将尝试按照这些指导原则重构它。在任何情况下，是否有任何文档可以让我阅读历史堆栈以及它是如何精确工作的？。我用谷歌搜索过，但信息要么太少，要么不是我真正搜索到的。历史记录上有文档链接。除非类组件检测到其道具有变化，否则不会重新发布（这是一个肤浅的比较，即第一级的引用和基元）。当您直接更改

this.props.history.location.search=q

React时，您不知道历史已经更改。当您通过history.push或history.replace等更改道具时，路由器正在侦听这些更改并处理道具的更新。