React-router history.listen 没有在 componentWillMount 中运行

Posted 2023-02-21

【中文标题】React-router history.listen 没有在 componentWillMount 中运行

【英文标题】：React-router history.listen not running in componentWillMount

【发布时间】：2018-11-30 02:38:15

【问题描述】：

我正在尝试制作一个 SearchResults 组件，该组件根据查询字符串中的内容显示搜索结果，该查询字符串由 SearchForm 组件更新。建议here 我使用history.listen。好主意，除了在 componentWillMount 中调用时出于某种原因，history.listen 没有被触发：

componentWillMount() 
    let location;
    this.props.history.listen(routerState => 
        console.log('current location:' + routerState); //never logs anything...
        location = routerState;
    );
    console.log(location); //'undefined'
    let search = location;
    console.log(search); //'undefined'
    this.setState( search: search.search ); //throws "Cannot read property search of undefined error

这看起来很奇怪，因为我在这里使用 history.listen 与之前的海报在该链接中所做的几乎完全一样。我也尝试将这个逻辑放在 componentDidMount 中，结果相同。

我的组件在这里被withRouter包裹起来。

【参考方案1】：

通过在监听调用中实现逻辑以及将初始化逻辑放入 componentDidMount 中解决了这个问题——这是必要的，因为 history.listen 仅在更改时触发，而不是在初始渲染时触发。

我的代码：

componentWillMount() 
    this.unlisten = this.props.history.listen(location => 
        console.log('current location:' + location);
        let query = qs.parse(location.search);
        console.log(query) //logs an object with attributes based on the current query string
    );


componentWillUnmount() 
    this.unlisten();


componentDidMount() 
    let query = qs.parse(this.props.location.search);
    console.log(query); //logs an object with attributes based on the current query string