关于react-router的一个问题

Question

react-router为什么拿到的是上次的tab？

class Home extends Component {
    render() {
        console.log(this.props.location.query.tab);
        return (
            <div>
                <Nav tab={this.props.location.query.tab}/>
                <List/>
            </div>
        );
    }
}

不知道怎么回事，当路由的查询参数改变了之后，在Home里打印的是改变之后的最新的查询参数，但是在Nav组件中拿到的却是旧的改变之前的查询参数，导致在Nav组件中拿到的都是前一个tab，求解？？？

Nav代码：

class Nav extends Component {
    handleClick(){
        const {tab,renderList} = this.props;
        console.log(this.props.tab);
        renderList(tab);
    }

    render() {
        return (
            <nav className={homeStyle.nav}>
                <ul>
                    <li onClick={this.handleClick.bind(this)}><IndexLink to='/'>全部</IndexLink></li>
                    <li onClick={this.handleClick.bind(this)}><Link to={{ pathname: "/", query: {tab: "good"}}}>精华</Link></li>
                    <li onClick={this.handleClick.bind(this)}><Link to={{ pathname: "/", query: {tab: "share"}}}>分享</Link></li>
                    <li onClick={this.handleClick.bind(this)}><Link to={{ pathname: "/", query: {tab: "ask"}}}>问答</Link></li>
                    <li onClick={this.handleClick.bind(this)}><Link to={{ pathname: "/", query: {tab: "job"}}}>招聘</Link></li>
                </ul>
            </nav>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        renderList : (tab)=>{
            dispatch(actions.fetchAllTopics(tab))
        }
    }
}

export default connect(null,mapDispatchToProps)(Nav);

如果把handleClick函数改一下：

handleClick(){
        // var {tab,renderList} = this.props;
        console.log(this);
        console.log(this.props.tab);
        this.props.renderList(this.props.tab);
    }
    

在打印的this中发现tab是正确的，但是在this.props.tab的打印中发现tab却是旧的，真奇怪啊。

不过在Nav组件的render函数return前打印tab的值又是对的最新的，搞不懂怎么回事

Answer 1

handleClick 的时候 this.props 还没更新呢。去掉 handleClick，试试用 componentWillReceive。