import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image,
TextInput,
TouchableHighlight,
Alert
} from 'react-native';
import Button from 'react-native-button'
import {Actions} from 'react-native-router-flux'
import Home from './Home'
export class Weight extends Component{
constructor(props) {
super(props);
this.state = {
data: '',
data1:'',
textinput:'',
entryDate: '',
systol:''
}
componentDidMount(){
this._onPressButtonGET();
}
_onPressButtonPOST(){
fetch("url", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
"entryDate":"3/2/2017 2:00 AM",
"systol": "120",
"mobileType":"ANDROID",
"userName":"menutest"
})})
.then((response) => response.json())
.then((responseData) => {
Alert.alert(
"Blood pressure data",
"Blood pressure data - " + JSON.stringify(responseData)
)
})
.done();
}
_onPressButtonGET () {
fetch("url", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({"mobileType":"ANDROID","userName":"menutest"})})
.then((response) => response.json())
.then((responseData) => {
this.setState({ data: JSON.stringify(responseData) })
})
.done();
}
render(){
return(
<View>
<TouchableHighlight onPress={this._onPressButtonPOST}>
<Text>Add</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._onPressButtonGET.bind(this)}>
<Text>show</Text>
</TouchableHighlight>
<Text>{this.state.responseData.entryDate}</Text>
<Text>{this.state.responseData.systol}</Text>
<Text>hello{this.state.data}</Text>
</View>
);
}
}
module.exports = Weight;
我想在屏幕上只显示systol和entryDate,但我上面的代码显示了来自Web服务的所有数据,如何编辑我想要仅显示那些内容的代码?我尝试使用this.setState({data:responseData.entryDate}),但这不起作用need help。 以及如何在_onPressButtonGET()中使用for循环来显示所有输入日期和systol。
答案 0 :(得分:1)
如果响应数据是对象 而不是
this.setState({ data: JSON.stringify(responseData) })
使用
<强> this.setState({ entryDate: responseData.entryDate, systol: responseData.systol })
强>
然后在渲染中使用
{this.state.entryDate}
和{this.state.systol}
首先确保构造函数中有一个干净的代码(在设置状态后添加} ),然后确保从正确的url而不仅仅是字符串中获取数据,然后确保收到你需要的确切数据,这是一个对象,然后如上所述设置你需要的状态信息,然后在渲染函数中使用它。