리액트 네이티브 picker.item 추가 관련 질문입니다.
조회수 453회
서버에서 db값을 가져와서 리액트네이티브 picker에 추가하고자 합니다.
import React, {Component} from 'react';
import {View, Picker} from 'react-native';
import axios from 'axios'
class INPUT extends Component{
constructor(props){
super(props)
this.arr = []
axios.get('http://beam1100.cafe24app.com/input').then((res)=>{
for(var i in res.data.results){
var results = res.data.results
this.arr.push(<Picker.Item key={results[i].num} value={results[i].name} label={results[i].name}/>)
}
})
}
render(){
return(
<View>
<Picker>
{this.arr}
</Picker>
</View>
)
}
}
export default INPUT
가져온 db 배열은 다음과 같습니다.
Array [
Object { "name": "벤치프레스", "num": 1, },
Object { "name": "스쿼트", "num": 2, },
Object { "name": "데드리프트", "num": 3, },
]
아무런 오류도 뜨지 않고 추가가 안됩니다. 왜이럴까요?
1 답변
-
class INPUT extends Component{ constructor(props){ super(props) this.state={ arr:[], selected:null } axios.get('http://beam1100.cafe24app.com/input') .then((res)=>{ var results = res.data.results for(var i in results){ var picker = < Picker.Item key={results[i].num} value={results[i].name} label={results[i].name}/> this.setState({arr:this.state.arr.concat(picker)}); } }) } render(){ return( <View> <Picker selectedValue={this.state.selected} onValueChange={(e)=>{ this.setState({selected:e}) }} > {this.state.arr} </Picker> </View> ) } }state를 이용해서 수정하기는 했지만,
리액트 사이클에 따르면 constructor가 끝난 후 render가 실행되는 것으로 아는데요, 왜 this.변수를 이용해서 constructor에서 render로 빈 배열이 전달되는지 모르겠습니다. 아시는 분 계신가요?
댓글 입력