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 []具有响应的值，就像在第一个框中一样。但我不知道如何将location的值设置为下拉菜单项。有人可以帮忙吗？谢谢

这是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 )
})

将JSON数组数据从提取到下拉

1 个答案: