如何将获取返回的数据数组放入 Dropdown 组件？

Question

我正在尝试制作一个简单的下拉列表，其中数据是从获取返回中获得的。 如果我使用控制台查看返回，它显示如下：

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

Answer 1

由于react-native-material-dropdown接受{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 }}/>