从 React Native 中的 JSON 列表中提取数据答案

【问题标题】：Extract data from JSON list in React native从 React Native 中的 JSON 列表中提取数据
【发布时间】：2017-03-14 07:29:39
【问题描述】：

我想解析一个 JSON 文件并在屏幕上显示一些数据。我可以使用以下代码显示所有数据，但我只想显示entryDate 和sysol。是否可以在_onPressButtonGET() 中使用 for 循环并仅在那里显示数据？

       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: '',
            data1:'',
            textinput:'',
            entryDate:[]

          }
           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) => {
                    Alert.alert('problem while adding data');
                })
                .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) })
data["list"].map(d => this.state.entryDate.push(d.entryDate));


                        this.setState({ entryDate: jsonResponse.entryDate, systol: responseData.systol })


                    }).catch((error) => {
                    Alert.alert('problem while getting data');
                })
               .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>
this.state.entryDate.map( d => (<Text>{d}</Text>));
                           <Text>{this.state.entryDate}</Text> //not displaying anythong
                       <Text>{this.state.data && JSON.parse(this.state.data)['entryDate']}</Text> //not displaying anything
                        <Text>hello{this.state.data}</Text> //printing all data 
                    </View>
            );
            }
        }


        module.exports = Temp;

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": "120"
    }
  ]
}

【问题讨论】：

将数据["list"] 更改为数据["List"]
还是同样的错误。
使用 { this.state.entryDate.map( d => ({d})) }
现在没有错误，但控制权将转到 .catch(error).. 块
所以你的 api 调用有问题，检查你的请求和你的服务器。

标签： json parsing react-native fetch

【解决方案1】：

首先将entryData初始化为数组

this.state = {
   entryDate: [],
}

在_onPressButtonGET()中使用

data["List"].map(d => this.state.entryData.push(d.entryDate));

在渲染中使用地图来显示所有这样的数据

this.state.entryDate.map( d => (<Text>{d}</Text>));

【讨论】：

你的意思是entryDate？
对不起，输入日期
错误如找不到变量：d。这个错误在渲染中

【解决方案2】：

    onPressButtonGET(){
                fetch(url, {
                    method: "POST",
                     headers: {
                         'Accept': 'application/json',
                         'Content-Type': 'application/json',
                     },
                    body: JSON.stringify({"mobileType":"ANDROID","userName":"menutest"})})
    }
        .then(response => {
            this.setState({entryDate:response.data})
        });


renderEntryDate() {
    this.state.entryDate.map((item)=>{
      <Text>{item.entryDate}</Text>
    })
    }

render() {
    return (
      <View>
      <Button style= {{
                  backgroundColor: '#6656B4',
                  width: 200,
                  height: 40,
                 }
                onPress={() => this.onPressButtonGET()}
                title="Get Weather"
                color="#841584"
        />
        {this.renderEntryDate()}
      <View>
    );
}

【讨论】：