[英]How to get JSON dynamic value in Picker React-native
Here am trying to get value in Picker , I am getting value in JSON format and trying to show that value in Picker like DropDown .这里我试图在 Picker 中获取值,我正在以 JSON 格式获取值并尝试在 Picker 中显示该值,如 DropDown 。 Please help.
请帮忙。 Below code am trying like hit and trial but not working .
下面的代码正在尝试像 hit 和 trial 但不起作用。 Below is my code and JSON value also .
下面也是我的代码和 JSON 值。 Do I need to install and dependencies ?
我需要安装和依赖吗?
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
}
});
// below is JSON response // 下面是 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"
}
Thanks谢谢
You've got a few issues in your code你的代码有一些问题
componentDidMount
componentDidMount
不需要 return 语句responseJson
, there is no key called messagesresponseJson
的值,没有名为 messages 的键for-loop
when you could just use the array from the responseJson
.responseJson
的数组时,您正在使用for-loop
。PickerValueHolder
which holds all the values each time you move the picker.PickerValueHolder
。 I have made some changes to your code, and this is a working example, which you can see here at this snack https://snack.expo.io/@andypandy/picker-example我对您的代码进行了一些更改,这是一个有效示例,您可以在此小吃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,
}
});
import * as React from 'react';
import { Text, View, StyleSheet, Alert, Picker } from 'react-native';
import { Constants } from 'react-native';
export default class AddInventory extends React.Component {
// add a selectValue to your state to stop the overwriting
state = {
PickerValueHolder: [],
selectedValue: ''
}
componentDidMount() {
// remove the return
fetch('http:///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',
backgroundColor: '#ecf0f1',
padding: 8,
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.