2017-04-24 2 views
0

다음 문제가 있습니다. 하나의 MenuItem을 클릭하면 클릭 한 MenuItem의 이름이 변경됩니다.setState ReactJS 재질 UI가 작동하지 않습니다.

export default class MenuAlumno extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     drawerOpen:false, 
     currentPage: 'Inicio' 
    } 
}; 

currentPages = (currentPage) => { 
    this.setState({ 
     currentPage: currentPage 
    }); 
    //this.state.currentPage = currentPage; 
} 

render() { 
    return (
     <div> 
      <Drawer 
       docked = {false} 
       width = {200} 
       open = {this.state.drawerOpen} 
       onRequestChange = {(drawerOpen) => this.setState({drawerOpen})} 
      > 
       <MenuItem primaryText = "Inicio" onTouchTap = {this.currentPages('Inicio')} containerElement = {<Link to="/administrador/inicio"/>}/> 
       <MenuItem primaryText = "Nueva Incidencia" onTouchTap = {this.currentPages('Nueva Incidencia')} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/> 
       <MenuItem primaryText = "Incidencias Recibidas" onTouchTap = {this.currentPages('Incidencias Recibidas')} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/> 
       <MenuItem primaryText = "Informes" onTouchTap = {this.currentPages('Informes')} containerElement = {<Link to="/administrador/informes"/>}/> 
      </Drawer> 
     </div> 
    ); 
} 

을하지만 난 다음 오류가 있습니다 : 나는 그렇게 할

Warning: setState(...): 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'.

가 무엇을 할 수 있습니까? 다들 감사 해요.

편집 : ----

내가 이렇게 할 경우 :

<MenuItem primaryText = "Inicio" onTouchTap = {() => this.currentPages('Inicio')} containerElement = {<Link to="/administrador/inicio"/>}/> 
       <MenuItem primaryText = "Nueva Incidencia" onTouchTap = {() => this.currentPages('Nueva Incidencia')} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/> 
       <MenuItem primaryText = "Incidencias Recibidas" onTouchTap = {() => this.currentPages('Incidencias Recibidas')} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/> 
       <MenuItem primaryText = "Informes" onTouchTap = {() => this.currentPages('Informes')} containerElement = {<Link to="/administrador/informes"/>}/> 

내가 어떤 오류가 발생하지 않은 있지만 작동하지 않습니다 (추가() => 전화 기능을 시작). 상태가 업데이트되지 않으면 'Inicio'가되고 같은 선택 항목을 다시 클릭하면 상태가 변경됩니다 (단, 동일한 옵션을 두 번 클릭 할 때만). 나는 그것이 메뉴 구성 요소를 다시 렌더링하는 다른 경로에 링크 할 수 있다고 생각합니다. 어떤 해결책?

감사합니다.

+0

'render' 메소드 안에서'currentPages' 함수를 호출하고 있습니다. 그것은 부정사가 발생할 수 있으므로 허용되지 않습니다. 내 생각에, 당신의 구현은 당신이 정말로 원하는 것이 아닙니다. 이것을 시도하십시오 :'onTouchTap = {() => this.currentPages (...)}' –

+0

'currentPages' 함수를 호출 할 곳에'onTouchTap'에 대한 _callback_을 바인드 할 것입니다 –

+0

바로 지금, 하지만 편집 후 내 게시물에 추가 된 다음 오류가 있습니다. 답변 감사합니다. – JuMoGar

답변

0

내 구성 요소 MenuAlumno를 현재 페이지로 설정하려는 이름으로 호출 할 때이를 소품으로 추가하여 해결했습니다. 그것은 작동합니다. 누구든지 다른 해결책을 가지고 있다면, 나는 그것을 기꺼이 기꺼이 시도 할 것이다. 안녕.

관련 문제