Как получить JSON данных в реагирующем нативном материале

Question

Вот мои Json данные API. В этих данных я хочу, чтобы в раскрывающемся меню я оставлял leftType. Пожалуйста, проверьте мой код.

  {
  "message": "Leave Type List ",
  "data": [
     {
        "id": 3,
        "leaveType": "Medical Leave",
    },
    {
        "id": 4,
        "leaveType": "Casual Leave",
    },
    {
        "id": 51,
        "leaveType": "Privileged leave",
     }
   ],
  "status": "1"
} 

Я использовал раскрывающийся список реакции-нативный материал в моем Реагировать на родной проект. Я хочу получить данные о листьях типа из JSON API в выпадающем меню. Вот мой код.

  componentDidMount() {
  const url = 'http://104.197.28.169:3000/showLeaveType'
  fetch(url)
    .then(response => response.json())
    .then((responseJson) => {
      this.setState({
       dataSource : responseJson ,
        isLoading: false
      })
    })
    .catch(error => console.log(error)) //to catch the errors if any
  }

  render() {

     return(  
       <View> 
            <Dropdown style={{ fontSize: 15 }}

            data= {this.state.dataSource.data.leaveType} 

            baseColor='#b8b8b8' itemColor='grey' selectedItemColor='#484848'
            containerStyle={styles.dropdownStyle} pickerStyle={styles.dropdownPicker}
            valueExtractor={({ value }) => value}
            onChangeText={LeaveTypetext => this.setState({LeaveTypetext })}
            rippleCentered={true}
            rippleInsets={{ top: 0, bottom: 0, backgroundColor: 'red' }}
            inputContainerStyle={{ marginTop: -25, borderBottomColor: 'transparent', marginLeft: 
          10 }}
            defaultValue="Please Select"
          ></Dropdown> 

Answer 1

Вы должны сначала создать массив для выпадающего списка. Рабочий пример: https://snack.expo.io/@msbot01 / great-coffee

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import Constants from 'expo-constants';
import Highlighter from 'react-native-highlight-words';
import { Dropdown } from 'react-native-material-dropdown'; 


let data = {
  "message": "Leave Type List ",
  "data": [
     {
        "id": 3,
        "leaveType": "Medical Leave",
    },
    {
        "id": 4,
        "leaveType": "Casual Leave",
    },
    {
        "id": 51,
        "leaveType": "Privileged leave",
     }
   ],
  "status": "1"
} ;

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dropData: []
    }
  } 



  componentDidMount(){
    this.setData()

  }

  setData(){
    var tempArray = []  
    for(var i=0; i<data.data.length; i++){

      var each = {value: data.data[i].leaveType}
      tempArray.push(each);
    }
    this.setState({
      dropData: tempArray
    },()=>{console.log(this.state.dropData)}) 
  }



  render() {
    return (
      <View style={{ flex: 1 }}>
        <Dropdown
        label='Favorite Fruit'
        data={this.state.dropData}
      />
      </View>
    );
  }
} 

const styles = StyleSheet.create({});

Answer 2

Из библиотеки docs ваш объект данных должен иметь эту форму

let data = [{
      value: 'Banana',
    }, {
      value: 'Mango',
    }, {
      value: 'Pear',
    }];

Имя свойства должно называться value, поэтому вы должны сопоставить свой источник данных, чтобы иметь тот же формат

componentDidMount() {
  const url = 'http://104.197.28.169:3000/showLeaveType'
  fetch(url)
    .then(response => response.json())
    .then((responseJson) => {
      const dropdownData = responseJson.data.map(item => ({ value: item.leaveType }));
      this.setState({
       dataSource: responseJson,
        isLoading: false,
        dropdownData
      })
    })
    .catch(error => console.log(error)) //to catch the errors if any
  }

  render() {

     return(  
       <View> 
            <Dropdown style={{ fontSize: 15 }}

            data= {this.state.dropdownData} 

            baseColor='#b8b8b8' itemColor='grey' selectedItemColor='#484848'
            containerStyle={styles.dropdownStyle} pickerStyle={styles.dropdownPicker}
            valueExtractor={({ value }) => value}
            onChangeText={LeaveTypetext => this.setState({LeaveTypetext })}
            rippleCentered={true}
            rippleInsets={{ top: 0, bottom: 0, backgroundColor: 'red' }}
            inputContainerStyle={{ marginTop: -25, borderBottomColor: 'transparent', marginLeft: 
          10 }}
            defaultValue="Please Select"
          ></Dropdown> 

PS: чтобы использовать это решение, вы должны инициализировать dropdownData в вашем состоянии:

this.state = {
  dataSource: []
  isLoading: false,
  dropdownData: [] //<- add this line
}