React + React-Router 앱에서 상태를 유지할 위치는 어디입니까?

Question

React-Router를 사용하고 있지만 상태가 변경 될 경우 구성 요소를 계속 업데이트하면서 구성 요소 외부에서 상태를 유지하는 방법을 모르겠습니다. 나는 경로의 구성 요소에 속성을 전달 해요 :

class Index extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {foo: this.props.route.foo} 
    } 
} 

var bar = 'bla' 

var routes = (
    <Route path="/" foo=bar component={Index}/> 
); 

내 경로는 그래서 위 (없으며 다시 그리기 않음) 내 구성 요소를 업데이트하지 않습니다 예에서 bar를 업데이트 구성 요소의 외부에 정의되어있다. 이 문제를 해결하는 방법은 무엇입니까?

Answer 1

componentWillReceiveProps을 사용할 수 있습니다. 이 메소드는 해당 컴포넌트에 새로운 props을 전달할 때 호출됩니다. 이것을 사용하여 새 소품을 받으면 state을 새로 설정하십시오.

다음이 작동합니다.

class Index extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {foo: this.props.route.foo} 
    } 
    componentWillReceiveProps(nextProps) { 
    this.setState({ 
     foo: nextProps.route.foo, 
    }) 
    } 
} 

var bar = 'bla' 

var routes = (
    <Route path="/" foo={bar} component={Index}/> 
);