为什么使用了 react-router-redux 之后不断执行组件的render方法

class ActivityList extends Component {
        console.log('hello')
        return (<div></div>)
}

之后会在控制台不断的打印 hello

入口文件

const store = createStore()
const history = syncHistoryWithStore(hashHistory, store)

render(
    <Provider store={store}>
        <Router history={history}>
            <Route path="/" component={ActivityListContainer}>
                <IndexRoute component={ActivityListContainer} />
                <Route path="a" component={ActivityListContainer} />
                <Route path="b" component={ActivityListContainer} />
                <Route path="c" component={ActivityListContainer} />
                <Redirect from='*' to='/' />
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
)

reducer

const rootReducer = combineReducers({
  payload:listReducer,
  optionStatus: optionAction,
  routing:routerReducer
})
阅读 3.1k
1 个回答

在 @eyesofkids 帮助下,这个问题已经解决,由于我在 组件return 之前 无条件的调用了 routerOption(location.pathname)方法,在这个方法里面会dispach(action) 所以每次进入render方法的时候都会去执行该方法, 所以会不断的发送 action 导致组件不断得更新。

一般情况下我们的包含了dispatch调用的方法是在 用户操作事件之后来调用的,例如在单击事件中调用,此时是不会无限的执行下去的,但是由于我这里牵扯到了首屏数据自动填充,这个动作是在用户操作之前完成的,所以必须要写到return之前,我整体是通过路由变化来控制的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题