Question

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity,
  Image,
  TouchableHighlight,
  Alert,
  TextInput
} from 'react-native';
import Button from 'react-native-button'
import {Actions} from 'react-native-router-flux'
import Home from './Home'

export class Temp extends Component{
constructor(props) {
  super(props);
   this.state = {
    data: '',
    textinput:'',
  }
   state={
            shouldShow: false
        }
}

    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": this.state.textinput,
                "mobileType":"ANDROID",
                "userName":"menutest",

               })})
        .then((response) => response.json())
        .then((responseData) => {
            Alert.alert(
                "Blood pressure data",
                "Blood pressure data - " + JSON.stringify(responseData)
            )
        }).catch((error) => {
        console.error(error);
        })
        .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)})

            }) .catch((error) => {
        console.error(error);
      })

       .done();
    }
    render(){
        return(

            <View>
                <TouchableHighlight onPress={this._onPressButtonPOST.bind(this)}>
                    <Text>Add</Text> 
                </TouchableHighlight>

            <TouchableOpacity style= {{left:300,top:-20, }}
 onPress={()=>{ this.setState({ shouldShow: !this.state.shouldShow })}}
><Text>Edit</Text></TouchableOpacity>

{this.state.shouldShow ? <TextInput placeholder='systol' 
            onChangeText={(text) => this.setState({textinput: text})}
           /> : null}

                 <TouchableHighlight onPress={this._onPressButtonGET.bind(this)}>
                    <Text>show</Text>
                   </TouchableHighlight>

                <Text>{this.state.data}</Text>  
            </View>
    );
    }
}


module.exports = Temp;

我需要解析json文件并显示entryDate和systol的数据。但我无法解析它。但在上面的代码中，我能够显示所有数据。

{
"List": [
  {
"entryDate": "03/02/2017",
"entryDateTime": "03/02/2017 2:00 AM",
"entryTime": "2:00 AM",
"systol": "120"
},
  {
"entryDate": "03/02/2017",
"entryDateTime": "03/02/2017 2:00 AM",
"entryTime": "2:00 AM",
"systol": "121"
},
  {
"entryDate": "03/02/2017",
"entryDateTime": "03/02/2017 2:00 AM",
"entryTime": "2:00 AM",
"systol": "120"
},
  {
"entryDate": "03/02/2017",
"entryDateTime": "03/02/2017 2:00 AM",
"entryTime": "2:00 AM",
"systol": "122"
},
  {
"entryDate": "03/02/2017",
"entryDateTime": "03/02/2017 2:00 AM",
"entryTime": "2:00 AM",
"systol": "123"
}
]
}

这是我的json文件。

我希望输出如下：

entryDate:03/02/2017
systol:120
entryDate:03/02/2017
systol:121
entryDate:03/02/2017
systol:122
entryDate:03/02/2017
systol:123

Answer 1

将数据状态设置为空

<div class="list-container">
  <ul>
    <li data-level="1">Test 1
      <ul>
        <li data-level="2">Test 1 sub-menu
          <ul>
            <li>Test 1 sub-sub-menu</li>
          </ul>
        </li>
        <li>Test 1 sub-menu a</li>
      </ul>
    </li>
    <li data-level="1">Test 2
      <ul>
        <li>Test 2 sub-menu</li>
        <li data-level="2">Test 2 sub-menu a
          <ul>
            <li>Test 2 sub-sub-menu</li>
          </ul>
        </li>
      </ul>
    </li>
    <li data-level="1">Test 3
      <ul>
        <li>Test 3 sub-menu</li>
        <li data-level="2">Test 3 sub-menu a
          <ul>
            <li>Test 3 sub-sub-menu</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

变化

this.state = {
  data: null
};

到

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

然后在渲染中显示相关数据，如下所示 -

this.setState({ data : responseData })

无法解析json文件并显示数据 - 本机反应

1 个答案: