Как я могу поместить массив данных, полученный в результате выборки, в компонент Dropdown? - PullRequest
Новая
       6

Как я могу поместить массив данных, полученный в результате выборки, в компонент Dropdown?

0 голосов
/ 13 сентября 2018

Я пытаюсь сделать простой выпадающий список, данные которого получаются при возврате извлечения .. если я использую консоль для просмотра возврата, она выглядит так: 

[
  {
    "ID": "BOGOR~10"
    "Location": "BOGOR"
  },

  {
    "ID": "JADETABEK~16"
    "Location": "JADETABEK"
  }
]

если я хочу взять местоположение BOGOR и JADETABEK и поместить их в выпадающий список, как я могу это сделать? это мой тестовый класс 

import React , { Component } from 'react';
import { View , StyleSheet , Text , Dimensions } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';

const ScreenWidth = Dimensions.get('window').width;
const Screenheight = Dimensions.get('window').height;

export default class testing extends Component {

    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        fetch(url , {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({"lokasi":
                {

                }
            })
        })
        .then(response => response.json())
        .then(res => {
            this.setState({
                data: res.PilihLokasiResult.Lokasi    
            })
            alert(res.PilihLokasiResult.Lokasi)
        })
    }

    render() {
        return(
            <View style={styles.container}>
                <View>
                    <Text>{this.state.location}</Text>
                    <Dropdown label="select location" style={{width: 400 }}/>
                </View>
            </View>
        )
    }
}

1 Ответ

0 голосов
/ 13 сентября 2018

Вам необходимо отформатировать данные, так как реагирует на нативный материал-выпадающий список принимает данные в виде {value: 'Sample'}

this.state = {
  data: [],
  dropDownData: []
}

const formatData = (data) => {
  return data.map(dataObj => {
    return {value: dataObj.Location} // return based on location
  })
}

.then(res => {
   const dropDownData = formatData(res.PilihLokasiResult.Lokasi)
   this.setState({
     data: res.PilihLokasiResult.Lokasi,
     dropDownData    
   })
})

<Dropdown label="select location" data={this.state.dropDownData} style={{width: 400 }}/>
...