componentDidMount() 함수에서 여러 API 요청을 가져 오는 중 기본 응답

Question

componentDidMount() 함수에서 여러 API 요청을 가져 오려고합니다. API 호출에서 항목을 가져 오는 picker이 있습니다. 피커 값을 반환하는 또 다른 API가 있습니다. 이제 피커에서 후자의 API에서받은 값을 선택하도록 설정하려고합니다. 두 API를 모두 가져 오는 중입니다. componentDidMount function
여기 내 코드가 있습니다. 제가 누락 된 곳을 제안하십시오.

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

당신이 코멘트에 말했듯이, 두 번째 API 응답 :

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