2016-05-04 12 views
3

私のアプリにはピッカーがあり、これをサーバーに取り込まれたデータで埋めたいと思っています。アプリの状態でデータがありますが、トン私は取り込みのネイティブ反応のピッカー(アンドロイド)を埋める方法

<Picker 
       style={styles.picker} 
       itemStyle={styles.items} 
       selectedValue={this.state.client} 
       onValueChange={(cli) => this.setState({client: cli})} 
       prompt="Seleccione un cliente" > 
       <Picker.Item label="Cliente 1" value="1" /> 
       <Picker.Item label="Cliente 2" value="2" /> 
       <Picker.Item label="Cliente 5" value="5" /> 
       <Picker.Item label="Cliente 4" value="4" /> 
       <Picker.Item label="Cliente 3" value="3" /> 
       <Picker.Item label="Cliente 9" value="9" /> 
       <Picker.Item label="Cliente 8" value="8" /> 
      </Picker> 

となFetchData機能

fetchData() { 
    var baseURL = 'http://192.168.100.11:3000/clients'; 
    fetch(baseURL, { 
     headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
     } 
    }) 
     .then((response) => response.json()) 
     .then((responseData) => { 
      if(responseData.message){ 
      this.setState({isLoading: !this.state.isLoading}); 
      alert(responseData.message); 
      }else{ 
      this.setState({isLoading: !this.state.isLoading, clients:responseData}); 
      } 
     }) 
     .done(); 
    } 
私の見解では、これを持っているデータをフェッチ

constructor(props) { 
    super(props); 
    this.state = { 
     isLoading: false, 
     client: '', 
     clients: null 
    }; 
    } 

componentDidMount() { 
    this.fetchData(); 
    } 

ときピッカーを更新するアプリを作る方法を知っています

データが取得されたときのピッカーの更新方法を教えてください。おかげ

答えて

3

あなたは、たとえば、それらをマッピングすることで、あなたの状態に基づいて、ピッカーの項目を設定する必要があります。

<Picker style={styles.picker} 
     itemStyle={styles.items} 
     selectedValue={this.state.client} 
     onValueChange={(cli) => this.setState({client: cli})}> 
      {this.state.clients.map((l, i) => {return <Picker.Item value={l} label={"Cliente " + i} key={i} /> })} 
    </Picker> 

あなたはフェッチからデータを受信すると、あなたがそうであるようにあなただけの、「クライアント」の状態を更新ピッカー項目が自動的に更新されます。項目は、ボタンをクリックするに基づいて更新されている

の例では、ここで見つけることができます:https://rnplay.org/apps/XfkfnQ

+0

私はフェッチ行い、データがこの[{「ID」のように来るので、私の最初の状態がnull:3、 "名前": "クライアント3"}、{"ID":2、 "名前": "クライアント2"}] ...私はあなたの例でこのようなものを作る{this.state.clients.map((data )これはnullがオブジェクトではないことを示しています – xploshioOn

+0

まあ、私はこの[{ "id": "1"、 "name": "loading ..."}]初期状態で、いくつかの変更を加えれば、助けてくれてありがとうございます。 – xploshioOn

関連する問題