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

Question

我正在尝试构建一个简单的应用程序，该应用程序将显示一个下拉菜单，该下拉菜单的值是从 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',
    },
})

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

这是 console.log(res)

Answer 1

您要使用的库等待一个道具 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 )
})