无法解析 json 文件并显示数据 - 反应原生

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

将数据状态设置为空

this.state = {
  data: null
};

改变

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

到

this.setState({ data : responseData })

然后像这样在渲染中显示相关数据 -

  <View>
    ....
    ....
    {this.state.data &&
      this.state.data.List.map((d,i) => (
        <View key={i}>
          <Text>{d.entryDate}</Text>
          <Text>{d.systol}</Text>
        </View>
    ))}
  </View>