2016-08-18 2 views
0

이 문제와 관련하여 많은 게시물을 읽었습니다. this.setState은 비동기 호출이므로 매번 다시 렌더링되지 않습니다. 어떻게 다음과 같은 상황을 주어진이 문제를 접근 할 :setState가 함수 호출에서 업데이트되지 않음

getInitialState:() -> 
    return { 
     page: "" 
    } 

choose: (event) -> 
    console.log(@props.id) # This is the correct id that I want to pass into state 
    @setState({ 
     page: @props.id # @state.page isn't being set to @props.id 
    }) 

render:() -> 
    return (
     <button onClick={@choose}>Click me</button> 
    ) 

나는 온 클릭이 onClick={@choose.bind(@)}처럼 전화 bind을 시도했지만 이미이 작업을 자동으로 수행 반작용 것으로 보인다. 버튼을 클릭 한 후 choose()에 상태를 올바르게 설정하려면 어떻게해야합니까?

해결 방법 : 이것은 부모 구성 요소를 호출하는 하위 구성 요소이므로 state이 어딘가에서 손실되었습니다. 내가해야만하는 일은 부모 구성 요소에서 id을 통과시켜 소품으로 호출하고 거기를 통해 액세스하는 것입니다.

+1

예를 들어 어디서나 this.state.page를 사용하지 않으므로 작동하지 않는 것이 무엇인지 알기가 어렵습니다. – tobiasandersen

+0

이것은 제대로 작동 할 수 있습니다. 작동하지 않는 것은 무엇입니까? 렌더링시'console.log (this.state.page)'에 원하는 ID가 표시되지 않습니까? – John

답변

2

코드가 맞는 것 같습니다. setState은 동기가 보장되지 않으므로 실행이 지연 될 수 있습니다. 그것은 당신이 바로 코드에서 @setState@state.name에 액세스하려고하면, 당신은거야 그래서 당신이 바로 상태를 업데이트 한 후 호출되는 콜백 함수입니다 @setState의 두 번째 매개 변수를 사용해야합니다 이전 값

choose: (event) -> 
    console.log(@props.id) # This is the correct id that I want to pass into state 
    @setState({ 
    page: @props.id # @state.page isn't being set to @props.id 
    }) 
    console.log(@state.name) # here's old value 

를 얻을 수 있음을 의미 그래서

관련 문제