小编Mik*_*ike的帖子

React-redux connect()的mapStateToProps在react-router导航上被多次调用

我有一个简单的路由器(启动redux-router并切换react-router到消除变量).

<Router history={history}>
  <Route component={Admin} path='/admin'>
    <Route component={Pages} path='pages'/>
    <Route component={Posts} path='posts'/>
  </Route>
</Router>
Run Code Online (Sandbox Code Playgroud)

管理组件基本上只是{this.props.children}一些导航; 它不是connected组件.

Pages组件是一个connected组件,mapStateToProps()如下所示:

function mapStateToProps (state) {
  return {
    pages: state.entities.pages
  };
}
Run Code Online (Sandbox Code Playgroud)

帖子更有趣:

function mapStateToProps (state) {
  let posts = map(state.entities.posts, post => {
    return {
      ...post,
      author: findWhere(state.entities.users, {_id: post.author})
    };
  }

  return {
    posts
  };
}
Run Code Online (Sandbox Code Playgroud)

然后当我加载页面或在帖子/页面路由之间切换时,我在console.log()中得到以下内容.

// react-router navigate to /posts

Admin render()
posts: map state to props
Posts render() …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router redux

12
推荐指数
2
解决办法
4843
查看次数

标签 统计

javascript ×1

react-router ×1

reactjs ×1

redux ×1