Wie man Picker (Android) von nativen mit Fetch füllen

Question

Ich habe einen Picker in meiner App, und ich möchte dies mit Daten auf dem Server abgerufen, habe ich die Daten in einem Zustand der App, aber ich don ' t wissen, wie die App machen den Picker zu aktualisieren, wenn die Daten abgerufen wird

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

componentDidMount() { 
    this.fetchData(); 
    } 

ich habe dies in meiner Ansicht

<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> 

und die FetchData Funktion

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(); 
    } 

Die Sache ist, wie kann ich den Picker aktualisieren, wenn die Daten abgerufen werden.

dank

Answer 1

Sie sollten die Picker Elemente basierend auf dem Zustand gesetzt, indem sie abbildet, zum Beispiel:

<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> 

Wenn Sie die Daten aus Abruf erhalten, müssen Sie nur den Zustand der „Kunden“ aktualisieren, wie Sie tun, und die Picker-Artikel werden automatisch aktualisiert.

Ein Beispiel ist hier zu finden, wo die Elemente auf den Button aktualisiert basieren: https://rnplay.org/apps/XfkfnQ