如何用 fetch 填充 react native 的选择器（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>

当您收到来自 fetch 的数据时，您只需更新 "clients" 的状态，就像您正在做的那样，选择器项目将自动更新。

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

如何用 fetch 填充 react native 的选择器（android）

how to fill picker (android) of react native with fetch

android

picker

fetch

reactjs

react-native