リスト表示のためのネイティブ表示値

Question

ネイティブに反応するのは初めてです。私はHTTPリクエストを与えてレスポンスを得て、リストビューで結果を表示しようとしています。

http応答が動作します。これは私が得る応答です。私は、応答を取得した後、リストビュー内のすべてのチケットを表示するこの

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TextInput, 
    TouchableOpacity, 
    ScrollView 

} from 'react-native'; 


import authController from '../authController/auth' 
import frequentData from '../frequentData/frequentData' 
import cannedResponseController from '../cannedResponseComponent/cannedResponse' 
const platForm = require('react-native').Platform.OS; 

export default class dashboardScreen extends Component { 

    constructor(props) { 
    super(props); 
    this.state = {data : ''}; 

    frequentData.getAllTickets("sathya@zupportdesk.com", function(Alltickets) { 
     console.log('Response---------Alltickets----- : '+ JSON.stringify(Alltickets)); 
      console.log('Response---------size----- : '+ Alltickets.Items.length); 
      this.state = { 
      data: Alltickets.Items 
      }; 

    }); 
    } 

    navigate(routeName) { 
    this.props.navigator.push({ name : routeName }); 
    } 

    render() { 
    return (
     <View style={styles.container}> 
      <View style={ styles.topNavBar }> 
        <View style={ styles.navBarTextContainer }> 
         <Image style={ styles.navIcon } source={ require('../assests/hamburger.png') } /> 
         <Text style={ styles.navBarText }> DashBoard </Text> 
        </View> 
      </View> 


      <View> 
       <ScrollView> 
         { this.state.data.map((tickets) => { 
          return (
            <View key={ tickets.TicketID }> 
              <TouchableOpacity> 
               <View > 
                <View style={ styles.companyInnerView }> 
                 <Text> { tickets.From } </Text> 
                 <Text> {tickets.Subject} </Text> 
                </View> 
               </View> 
              </TouchableOpacity> 
              <View> 
              </View> 
             </View> 
            ); 
         })} 
       </ScrollView> 
      </View> 
     </View> 
    ); 
    } 
} 


const styles = StyleSheet.create({ 
    container: { 
    flex : 1, 
    flexDirection : 'column', 
    //justifyContent: 'center', 
    //alignItems: 'center', 
    backgroundColor : '#F3F3F4', 
    } 
    ,navMenuBtn : { 

    } 
    ,navMenuIcon : { 
     height : 50, 
     width : 30, 
     marginLeft : 15 
    } 
    ,topNavBar : { 
     height : 70, 
     backgroundColor : '#FFFFFF' 
    } 
    ,navImage1 : { 
     height : 70, 
     width : 70 
    } 

}); 

AppRegistry.registerComponent('TicketApp6',() => TicketApp6); 

エラー

のように私は、リストビューで表示したい

{ 
    "Items": [ 
     { 
      "_id": "000000000000000000000000", 
      "Subject": "React componen", 
      "From": "componen@gmail.com", 
      "CreateDate": "2017-06-16T08:29:43.444Z", 
      "Message": "React component that wrap", 
      "AssignedTo": "-1", 
      "Status": 0, 
      "Priority": 1, 
      "OverdueDateTime": "2017-07-28T00:00:00Z", 
      "OverdueDateTimeAsString": null, 
      "Read": false, 
      "TicketStatus": 0, 
      "InboxID": "5c7d5a56-f39f-40ac-b516-d9200fe03c68", 
      "TicketID": 6272, 
      "CompanyID": "c2ef2cc1-3db8-4d1f-93cf-8cd802aacc75", 
      "Deleted": false, 
      "AttachmentName": null, 
      "hasAttachment": false, 
      "ModifiedDate": "2017-06-16T08:29:43.444Z", 
      "Tags": null, 
      "IsFollowed": false, 
      "IsReply": false, 
      "TicketType": 6, 
      "LastUpdateState": 0, 
      "FromName": "componen" 
     }, 
     { 
      "_id": "000000000000000000000000", 
      "Subject": "There are one ", 
      "From": "sathya@zupportdesk.com", 
      "CreateDate": "2017-01-02T06:59:45.438Z", 
      "Message": "There are one or mor", 
      "AssignedTo": "69c02265-abca-4716-8a2f-ac5d642f876a", 
      "Status": 0, 
      "Priority": 3, 
      "OverdueDateTime": "2017-05-31T00:00:00Z", 
      "OverdueDateTimeAsString": null, 
      "Read": true, 
      "TicketStatus": 0, 
      "InboxID": "5c7d5a56-f39f-40ac-b516-d9200fe03c68", 
      "TicketID": 540, 
      "CompanyID": "c2ef2cc1-3db8-4d1f-93cf-8cd802aacc75", 
      "Deleted": false, 
      "AttachmentName": null, 
      "hasAttachment": false, 
      "ModifiedDate": "2017-01-02T06:59:45.438Z", 
      "Tags": null, 
      "IsFollowed": false, 
      "IsReply": false, 
      "TicketType": 6, 
      "LastUpdateState": 0, 
      "FromName": "sathyabaman" 
     }, 
    ], 
    "NextPageLink": null, 
    "Count": 6 
} 

getAllTicketsから、これを解決するのに役立つことができます。 tnx。

Answer 1

おそらくレンダリングメソッドが呼び出され、データに値が入っていて、最終的にundefinedをマップしようとしているからでしょう。

チケットを別の関数に移動して、代わりにレンダーすることをお試しください。

drawTickets() { 
    if(this.state.data.length > 0) { 
     return this.state.data.map(tickets => (
     <View key={tickets.TicketID}> 
      <TouchableOpacity> 
      <View> 
       <View style={ styles.companyInnerView }> 
       <Text> { tickets.From } </Text> 
       <Text> {tickets.Subject} </Text> 
       </View> 
      </View> 
      </TouchableOpacity> 
     <View> 
    )) 
    } 
    } 

    render() { 
    return (
     <View style={styles.container}> 
      <View style={ styles.topNavBar }> 
        <View style={ styles.navBarTextContainer }> 
         <Image style={ styles.navIcon } source={ require('../assests/hamburger.png') } /> 
         <Text style={ styles.navBarText }> DashBoard </Text> 
        </View> 
      </View> 
      <View> 
       <ScrollView> 
        {this.drawTicket()} 
       </ScrollView> 
      </View> 
     </View> 
    ); 
    } 

私はあなたがRNのFlatList APIを見て、かかわらず、代わりにそれを使用することをお勧めします。

P.S：状態を直接操作する代わりに、this.setState()を使用して常に状態を更新してください。