リアクタ・ルータV4の状態をlocation.pathnameに設定できません。

Question

自分のコンポーネントの状態をURLの現在のパス名に設定しようとしています。具体的には、私はとApp.jsで定義された私のResponsiveDrawerコンポーネントにこれをしたい：私はそれに次のコードをトリガすべききResponsiveDrawerコンポーネントで、

class App extends Component { 
    render() { 
    return (
     <Router> 
     <ResponsiveDrawer> 
      <div className="App"> 
      <Route exact path="/" component={Administrator} /> 
      <Route path="/admin" component={Administrator} /> 
      <Route exact path="/jobs" component={Jobs} /> 
      <Route path="/jobs/:id" render={({match}) => <ViewJob id={match.params.id} />} /> 
      <Route path="/entries/:jobId/:entryId" render={({match}) => <Entry jobId={match.params.jobId} entryId={match.params.entryId} />} /> 
      <Route exact path="/reports" component={Reports} /> 
      <Route path="/reports/:jobId" render={({match}) => <JobReport id={match.params.jobId} />} /> 
      <Route path="/reports/activity" component={ActivityReport} /> 
      </div> 
     </ResponsiveDrawer> 
    </Router> 

    ); 
    } 
} 

今ときURLの変更：

class ResponsiveDrawer extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     mobileOpen: false, 
     adminOpen: true, 
     jobsOpen: false, 
     reportsOpen: false, 
     activePath: '' 
    }; 
    this.setActiveState = this.setActiveState.bind(this); 
    this.isActiveFunc = this.isActiveFunc.bind(this); 
    } 


    setActiveState = (path) => { 
    this.setState({activePath: path}); 
    }; 

    isActiveFunc = (match, location) => { 
    console.log(location.pathname) 
    this.setActiveState(location.pathname); 
    return match 
    }; 

    render() { 
     <NavLink isActive={this.isActiveFunc} className={classes.subLink} to={{ pathname: "/admin/users" }}> 
     <ListItem button className={classes.nested}> 
     <ListItemText inset primary="Users" /> 
     </ListItem> 
     </NavLink> 

これは、NavLinkをクリックするたびに現在の場所を正確に記録します。私はlocation.pathnameの値に状態を設定しようとすると、しかし、私は次のエラーを取得する：

proxyConsole.js:54 Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount .

そして、私のブラウザが無限ループやクラッシュ

に任意のアイデアを行きますか？

Answer 1

あなたはisActiveに渡された関数はすぐにNavLinkレンダリング機能で呼び出されていること

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/NavLink.js#L34

、このラインから見ることができます。

setStateは、無限のレンダーループを引き起こす可能性があるので、renderでは使用しないでください。

代わりにcomponentWillReceivePropsを使用してください。