react生命周期的一些疑问

Question

1.公共数据，都是通过redux放在store里面的。具体是在/dashboard 组件 的componentDidMount()中通过异步action去改变store，比如reducer结构是user:{id:0}

2.在父组件下的子页面，比如/dashboard/test 组件下。有一个getList的方法，getList(this.props.user.id)

3.当刷新 /dashboard/test的时候。会有两次请求1.getUser 2.getList.如果这个时候id还没有写入store的话。getList就会报错。

4.目前的方案:

componentWillReciveProps(nextProps){
    if(this.props.user.id!=nextProps.user.id){
        getList(nextProps.user.id)
    }
}

这样有个问题，就是如果 已经拿到了userId，在两个子页面切换的时候 也不会触发componentWillReciveProps。
这样就不会执行getList

还有没有好的解决方案啊？

============补充内容===========
可能是我没表述清楚。
1.父页面

componentDidMount(){
    this.props.action.getUser()//异步拿到userId放入store
}

2.子页面1

componentDidMount(){
    this.getXXList(userId)//获取某个xx list需要userId
}

3.子页面2

componentDidMount(){
    this.getYYList(userId)//获取某个yy list需要userId
}

场景:刷新子页面1

现象:执行this.getXXList(userId) ，this.props.action.getUser()
有可能userId还没拿到，就执行了getXXList

Answer 1

一个原则：通用数据没回来之前，我的业务组件压根就不渲染。比如，用户数据没回来之前我可以一直显示Loading。等用户数据回来之后再正常走流程（解决了你的依赖问题）

什么时候获取用户数据？

建议在最顶层组件去做（如果一定要在componentDidMount中获取的话），顶层组件在数据没回来之前一直Loading（或者你喜欢的页面），数据回来之后正常渲染。

回到你的需求来说。

就是用户数组没回来之前，你的/dashboard/test是不会进行渲染的（可以简单的理解为返回了null），然后具体到子组件，一般也是在componentDidMount的时候进行数据获取（不会存在你的那个userid判断），而恰恰当子组件进行切换的时候，你应该在componentWillReceiveProps中判断子页面的id（不同则进行list数据获取。

Answer 2

这个要看你的组件设计吧；userId影响组件的方法getList,那么具体在组件渲染上有什么影响？我理解的是你的组建需要一个userId的传入，然后异步的获取对应id的数据getList(id);然后这个是通用组建，很多子页面都在使用，我不理解的是子页面的切换为什么id不会变化，而且更合理的方式不应该是在didmount来通过porps里面的id来获取list数据吗？切换页面的话就删除组件，重新构建一个新的组件；可能是我还没有完全理解你的场景。

Answer 3

componentDidMount(){
  if (this.props.user.id)  this.getList(userId)
}
componentWillReciveProps(nextProps){
    if(this.props.user.id!=nextProps.user.id){
        this.getList(nextProps.user.id)
    }
}

Answer 4

现在的场景是 userList 是依赖于 userId 请求的，而且 user-id 也要共享，这样就不好在 action 处做逻辑。

其实我更纳闷的是，为什么有 getUserId 的存在。假如它是全局的用户权限，必然是由登录统一处理的。如果它是通过一个用户列表点进来的，那 user-id 是从 router 就可以获取的。感觉不存在异步的情况。

回到这种场景... 一种是在页面渲染的时候做限制，connect 的组件依赖于 user-id，获取到 re-render。可以做判断，存在 id 才渲染组件。
另一种就是 componentDidMount 和 componentWillReciveProps 结合处理，像楼上的做法那样，didMount 判断获取，CWRP 再判断处理 。不过个人不推荐这种，通常这种是因为设计的不合理，用来填坑的。不过要是为了快速解决问题，未尝不可。