在 componentDidMount() 函数中获取多个 API 请求反应本机

Question

我想在 componentDidMount() 函数中获取多个 API 请求。我有一个 picker 可以从 API 调用中获取项目。我有另一个 API 其中 returns 一个选择器值。现在我想在选择器中设置选择器中后者 API 收到的值。我正在尝试在 componentDidMount 函数
中获取两个 API 这是我的代码。请指出我遗漏的地方。

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 回复：

[{"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.
  });
})

在 componentDidMount() 函数中获取多个 API 请求反应本机

fetching multiple API requests in componentDidMount() function react native

android

picker

reactjs

react-native