如何填充picker(android)的反应原生与fetch

我在我的应用程序中有一个选择器,我想用服务器中提取的数据填充它,我有应用程序状态的数据,但我不知道如何使应用程序更新选择器时数据是取

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

问题是如何在获取数据时更新选择器.谢谢

最佳答案
您应该通过映射来根据您的状态设置选择器项,例如:

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

当您从fetch接收数据时,您只需更新“客户端”的状态,并且您将自动更新选择器项.

可以在此处找到一个示例,其中基于单击按钮更新项目:https://rnplay.org/apps/XfkfnQ

转载注明原文:如何填充picker(android)的反应原生与fetch - 代码日志