Redux、React、React-router 问题请教,如何在路由切换时触发组件的Acition
发布于 8 年前 作者 sarike 12932 次浏览 来自 问答

最近打算在一个新项目中采用:redux、reactjs、redux-react、redux-simple-router。 边学边用,踩了许多坑,这个坑爬不出来了,特地请教各位大神,问题描述入下:

  1. 路由配置类似这样: <Route path='person/:id' component={PersonDetail} />
  2. PersonDetail是一个详情页面,我期望根据路由中的id动态获取详情, PersonDetail的代码大致如下所示: 我在componentDidMount函数里dispatch一个异步获取数据的action,在相应的reducer里将结果放到state.person里。
var PersonDetail = React.createClass({
    componentDidMount: function () {
        this.props.dispatch(actions.fetchPersonDetail(this.props.params.id));
    },
	render: function() {
		return (
            <div>{this.props.person.name}</div>
		);
	}
});

首次进入页面时跟我期望的一样: 1)执行 componentDidMount 2)dispatch异步Action 3)reducer更新state 4) 渲染PersonDetail,state.person作为它的属性

但是当我切换路由时,例如:person/123 切换到 person/456 React只会调用 render,不会再执行 componentDidMount了。 原因我是知道的,React只有在初始化渲染的时候,调用一次componentDidMount函数。 但是我这种情况下,有什么好的解决方案呢? 我期望是在各个组件内(如上面说的PersonDetail),自己感知路由的变化,让各个模块相对独立一些。

2 回复

明白了: https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ComponentLifecycle.md 最开始也想到了在其他生命周期函数里来触发,只是没有注意到componentDidUpdate还可以获取上一次的props,所以搞出了个死循环。 第一次如此大规模更新前端技术栈,坑太多,慢慢踩……

@sarike 你好你上面提供的链接打不开了,不知道能否再提供一个呢,非常感谢。

回到顶部