这里试图在Picker中获取值,我正在获取JSON格式的值,并试图在Picker中显示该值,例如DropDown。请帮忙。下面的代码试图像打和审判,但不能正常工作。以下是我的代码和JSON值。我需要安装和依赖吗?
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View, Platform, Picker, ActivityIndicator, Button, Alert} from 'react-native'; export default class AddInventory extends Component { componentDidMount() { return fetch('http://1/Dsenze/userapi/inventory/viewinventorytype', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ "username" :"admin", "password" :"admin" }) }).then((response) => response.json()) .then((responseJson) => { var count = Object.keys(responseJson.message.Obj).length; let PickerValueHolder = []; for(var i=0;i<count;i++){ console.log(responseJson.message.Obj[i].name) // I need to add PickerValueHolder.push({ value: responseJson.message.Obj[i].name }); // Create your array of data } this.setState({ PickerValueHolder }); // Set the new state }) .catch((error) => { console.error(error); }); } GetPickerSelectedItemValue=()=>{ Alert.alert(this.state.PickerValueHolder); } render() { return ( <View style={styles.MainContainer}> <Picker selectedValue={this.state.PickerValueHolder} onValueChange={(itemValue, itemIndex) => this.setState({PickerValueHolder: itemValue})} > { this.state.dataSource.map((item, key)=>( <Picker.Item label={item.name} value={item.name} key={key} />) )} </Picker> <Button title="Click Here To Get Picker Selected Item Value" onPress={ this.GetPickerSelectedItemValue } /> </View> ); } } const styles = StyleSheet.create({ MainContainer :{ justifyContent: 'center', flex:1, margin: 10 } });
//下面是JSON响应
{ "inventoryTypeData": [{ "id": 1, "name": "scanning equipment" }, { "id": 2, "name": "ecg machine" }, { "id": 3, "name": "ct-scan machine" }, { "id": 7, "name": "x-ray machine" }], "success": "true" }
谢谢
您的代码中有几个问题
componentDidMount
responseJson
for-loop
PickerValueHolder
我对您的代码进行了一些更改,这是一个有效的示例,您可以在这里查看此小吃https://snack.expo.io/@andypandy/picker- example
import * as React from 'react'; import { Text, View, StyleSheet, Alert, Picker } from 'react-native'; import { Constants } from 'expo'; export default class App extends React.Component { // add a selectValue to your state to stop the overwriting state = { PickerValueHolder: [], selectedValue: '' } componentDidMount() { // remove the return fetch('http://1/Dsenze/userapi/inventory/viewinventorytype', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ "username" :"admin", "password" :"admin" }) }).then((response) => response.json()) .then((responseJson) => { // use the inventoryTypeData as it is already an array let PickerValueHolder = responseJson.inventoryTypeData; this.setState({ PickerValueHolder }); // Set the new state }) .catch((error) => { console.error(error); }); } GetPickerSelectedItemValue=()=>{ Alert.alert(this.state.PickerValueHolder); } render() { return ( <View style={styles.container}> {<Picker selectedValue={this.state.selectedValue} onValueChange={(itemValue, itemIndex) => this.setState({selectedValue: itemValue})} > { this.state.PickerValueHolder.map((item, key)=> <Picker.Item label={item.name} value={item.name} key={key} /> )} </Picker>} </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', paddingTop: Constants.statusBarHeight, backgroundColor: '#ecf0f1', padding: 8, } });