在 Picker react native 中添加 API 数据值

Question

我是本地反应的新手。我想使用 API 将数据库中的值添加到选择器中，请建议我该怎么做。

componentDidMount() {
    return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
      .then((response) => response.json())
      .then((responseJson) => {
        let ds = new Picker.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.setState({
          isLoading: false,
          dataSource: ds.cloneWithRows(responseJson),
        }, function() {
          // In this block you can do something with new state.
        });
      })
      .catch((error) => {
        console.error(error);
      });
    }

这是我的选择器，我需要在其中插入从 API 函数组件 DidMount(( 获取的值

render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
<Picker
  selectedValue={this.state.active}
  dataSource={this.state.dataSource}
  onValueChange={(activeValue, activeIndex) => this.setState({active: 
    activeValue})}>
  renderRow={(rowData) => <Picker.Item label={rowData.fruit_name} value=
   {rowData.fruit_name} />} 
    </Picker>
      </View>
    );}}

Answer 1

在这里找到了一个解决方案：- https://reactnativecode.com/create-picker-spinner-using-dynamic-json-data/

这是代码片段：-

componentDidMount() {
  const base64 = require('base-64');
return fetch('http://your_api_url', {
  method: 'POST',
  headers: {
    "Authorization": "Basic " + base64.encode("user:passwd")
  }
}).then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson,
      }, function() {
        // In this block you can do something with new state.
      });
    })
    .catch((error) => {
      console.error(error);
    });
}

下面的代码是我们将其添加到选取器中的地方。

render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
<Picker style={styles.PickerStyleClass}
        selectedValue={this.state.mode}
        onValueChange={(modeValue, modeIndex) => this.setState({mode: modeValue})}>
    {this.state.dataSource.map((item, key)=>(
            <Picker.Item label={item} value={item} key={key} />)
            )}
</Picker>
      </View>
    );}}