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

我正在尝试构建一个简单的应用程序，它将显示一个下拉列表，即从获取的返回中获得的下拉列表的值。此外，我只想在下拉列表/选择器/或任何其他可以选择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',
    },
})

import React，{Component}来自'React'；
从“react native”导入{View，StyleSheet，Text，Dimensions，Picker}；
从“react native material Dropdown”导入{Dropdown}；
从“本机基”导入{Item}；
const ScreenWidth=Dimensions.get（'window'）.width；
const Screenheight=维度.get（'window'）。高度；
导出默认类测试扩展组件{
建造师（道具）{
超级（道具）
此.state={
数据：[]
}
} 
componentDidMount（）{
获取（url{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（{“lokasi”：
{
}
})
})
.then（response=>response.json（））
。然后（res=>{
console.log（res.PilihLokasiResult.Lokasi）
这是我的国家({
数据：res.PilihLokasiResult.lokasi
})
})
}
render（）{
返回(
{this.state.data.map（（索引）=>{
返回(
)
})}
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“白色”，
},
})

现在构造函数中的data[]具有与第一个框中相同的响应值。但我不知道如何设置下拉项的位置值。有人能帮忙吗？谢谢

这是console.log（res）

---

要使用的库将等待一个prop

数据

数组，其中包含名为

值

的对象键作为选项值。因此，您可以创建它，然后像这样传递它（未测试）：

---

它作为数组等待

数据

道具。因此，您需要为选项传递一个数组。您可以根据提取结果创建此数组。我不明白你的另一个问题，关于“地点”的问题。如果您能更清楚地解释一下，也许有人能帮上忙。当我调用fetch方法时，它将返回一个结果，其中res.PilihLokasi.Lokasi的值与上面的第一个框类似。所以我需要返回的位置值，放在下拉项中。我得到它了吗？是否需要包含响应中的

位置

值的数组来传递

下拉列表

组件？是的，您是对的。。所以我希望下拉列表中有一项：-）BOGOR-）JADETABEK。我是react native的初学者，因此如果我犯了错误，请提供帮助。没有错误，您需要获取所需的数据并将其传递给组件。我已经提供了一个答案，我希望它能起作用。我已经尝试了.map函数。它抛出了一个错误，说“this.state.map不是一个函数”，当然是因为它是

this.state.data.map

：）我已经更新了我的答案。哈哈哈，现在它说“TypeError:TypeError:cannot read property'map'Of undefined”：（只需注释掉或删除这一行

const data=this.createData（）；

然后，添加

console.log（this.state）

就在

render（）

行的正下方。然后在控制台中查找日志。让我们来看看。

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

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

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