无法获取和显示特定数据 - 本机反应

时间:2017-03-08 07:08:45

标签: json react-native fetch fetch-api

      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。

1 个答案:

答案 0 :(得分:1)

如果响应数据是对象 而不是

this.setState({ data: JSON.stringify(responseData) })

使用

<强> this.setState({ entryDate: responseData.entryDate, systol: responseData.systol })

然后在渲染中使用 {this.state.entryDate}{this.state.systol}

首先确保构造函数中有一个干净的代码(在设置状态后添加} ),然后确保从正确的url而不仅仅是字符串中获取数据,然后确保收到你需要的确切数据,这是一个对象,然后如上所述设置你需要的状态信息,然后在渲染函数中使用它。