将JSON数组数据从fetch放到下拉列表中

Question

我正在尝试构建一个简单的应用程序，它将显示一个下拉列表，即从获取返回获得的下拉列表的值。此外，我想在下拉/选择器/或任何其他组件中显示位置，我可以选择1个选项。

我应该把回报放在一个数组或任何东西？

当我安排回程时，就像这样

[
  {
    "ID": "BOGOR~10~522",
    "Location": "BOGOR"
  },
  {
    "ID": "JADETABEK~16~502",
    "Location": "JADETABEK"
  }
]

这是测试类

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

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 => {
            console.log(res.PilihLokasiResult.Lokasi)
            this.setState({
                data: res.PilihLokasiResult.lokasi
            })
        })
    }

    render() {
        return(
            <View style={styles.container}>

                    {this.state.data.map((index) => {
                        return(
                            <Dropdown/>
                        )
                    })}

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
})

所以现在构造函数中的data []具有响应的值，就像在第一个框中一样。但我不知道如何将位置值设置为下拉项。有人可以帮忙吗？谢谢

这是console.log（res）

Answer 1

您要使用的库等待一个prop data数组，其中包含名为value的对象键作为您的选项值。所以，你可以创建它，然后传递这样的东西（未测试）：

createData() {
  return this.state.data.map( el => ({value: el.Location}));
}

render() {
        const data = this.createData();
        return(
            <View style={styles.container}>
                <Dropdown data={data} />
            </View>
        )
}

讨论聊天后更新

不知何故，res.PilihLokasiResult.Lokasi将作为JSON字符串出现。所以使用JSON.parse并设置状态就像解决了第二个问题：

this.setState({
    data: JSON.parse( res.PilihLokasiResult.Lokasi )
})