componentDidMount（）関数で複数のAPIリクエストを取得するネイティブに反応する

Question

componentDidMount()機能で複数のAPIリクエストを取得したい。私はAPI呼び出しから項目を取るpickerを持っています。私はピッカー値を返す別のAPIを持っています。今私はピッカーで後者のAPIで受け取った値を選択したいと思っています。私は両方のAPIを取得しようとしていますcomponentDidMount関数
ここに私のコードです。私はどこに行方不明を提案してください。

import React, { Component } from 'react'; 

import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from 'react-native'; 

export default class FirstProject extends Component { 

constructor(props) 
{ 

    super(props); 

    this.state = { 

    isLoading: true, 

    PickerValueHolder : '' 

    } 
} 

componentDidMount() { 

    const base64 = require('base-64'); 

// my API which fetches picker items 
     return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php') 
     .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); 
     }); 

    // another api which fetches a particular fruit_id from database which i ave to set selected in picker. 
fetch('http://my_api_url', { 
    method: 'POST', 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
    "fruit_id":"123" 
    }) 
}).then((response) => response.json()) 
    .then((responseJson) => { 
     this.setState({ 
     isLoading: false, 
     PickerValueHolder: responseJson, 
     }, function() { 
     // In this block you can do something with new state. 
     }); 
    }) 
    .catch((error) => { 
     console.error(error); 
    }); 
    } 

    GetPickerSelectedItemValue=()=>{ 

     Alert.alert(this.state.PickerValueHolder); 

    } 

render() { 

    if (this.state.isLoading) { 
    return (
     <View style={{flex: 1, paddingTop: 20}}> 
     <ActivityIndicator /> 
     </View> 
    ); 
    } 

    return (

    <View style={styles.MainContainer}> 

      <Picker 
      selectedValue={this.state.PickerValueHolder} 

      onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} > 

      { this.state.dataSource.map((item, key)=>(
      <Picker.Item label={item.fruit_name} value={item.fruit_name} key={key} />) 
      )} 

      </Picker> 

      <Button title="Click Here To Get Picker Selected Item Value" onPress={ this.GetPickerSelectedItemValue } /> 

    </View> 

    ); 
} 
} 

const styles = StyleSheet.create({ 

MainContainer :{ 

justifyContent: 'center', 
flex:1, 
margin: 10 
} 

}); 

Answer 1

あなたの第2のAPIの応答、コメントで言ったように：

[{"fruit_id": "123","fruit_name":"Strwaberry"}] 

だから、小さな変更で動作するかもしれません：

.then((responseJson) => { 
    this.setState({ 
    isLoading: false, 
    PickerValueHolder: responseJson[0].fruit_name, 
    }, function() { 
    // In this block you can do something with new state. 
    }); 
})