[expo][react native] <NumericInput /> re-render issue 해결

 

 

 

 

 

 

 

react native에선 this.setState({}) 호출시 컴포넌트들이 리랜더링된다.

다시말해 state 값의 변경이 발생하면 render()가 호출되어 실행된다.

 

아래의 코드는 계속 문제없이 작동이 되다가..

언제부턴가 state 값은 바뀌는데, UI상에선 값이 그대로 유지하게 되었다.

(예를들어 set_num의 값이 1인데 setState()로 set_num의 값을 2로 바꾸면, 실제 값은 바뀌는데 UI 상에선 1이 그대로 유지된다.)

<NumericInput  
  separatorWidth={4} 
  totalWidth={80} 
  totalHeight={50} 
  type='up-down' 
  valueType='integer' 
  minValue={0} 
  onChange={value => this.setState({set_num: value })} 
  value={this.state.set_num} 
/>

 

이 문제를 해결하는 방법은 매우 간단하다.

아래와 같이 initValue 속성을 추가하면 된다.

 

<NumericInput  
	separatorWidth={4} 
	totalWidth={80} 
	totalHeight={50} 
	type='up-down' 
	valueType='integer' 
	minValue={0} 
	onChange={value => this.setState({set_num: value })} 
	initValue={this.state.set_num} 
	value={this.state.set_num} 

/>

 

 

 

 

참고 사이트