如何使用獲取來填充本機反應的選擇器（android）

Question

我的應用程序中有一個選擇器，我想用從服務器中獲取的數據來填充它，我的數據處於應用程序的狀態，但是我不知道如何使應用程序在數據為拿來

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

componentDidMount() {
    this.fetchData();
  }

我認為這個

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

問題是在獲取數據時如何使選擇器更新。 謝謝

Answer 1

您應該根據自己的狀態通過映射它們來設置選擇器項目，例如：

<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