ReactNative - 解析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; 

我正在开发一个android应用程序，我需要从Web服务获取数据是json文件。我能够得到所有的东西，看起来像原始数据，但我需要解析这些数据并只显示少量内容。

{ 
"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" 
} 
] 
} 

这是我的数据看起来像。

我能够显示一个类似于

{"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"}]} 

，但我想显示这个样子，只是entryDate和systol

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

更换渲染功能有以下：你需要

render() { 

    const { List: list } = this.state.data 
    const renderList = list && list.map(({entryDate, systol},index) => { 
    return (
     <View key={index}> 
     <Text>{entryDate}</Text> 
     <Text>{systol}</Text> 
     </View> 
    ) 
    }) 
    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> 

     {renderList} 

    </View> 
); 

} 

一切都映射在列表中，并且是正映射的项目挑entryDate和systol。然后告诉React根据当前数据项（entryDate，systol）需要渲染什么。