javascript - React-Native 在 ListView 中显示值

Question

我是原生 react 新手。我正在尝试发出 http 请求并获取响应并在 ListView 中显示结果。

http 响应有效。这是我得到的回应。

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

我想在这样的 ListView 中显示它

/**
 * 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);

错误

我想在收到 getAllTickets 的响应后在 ListView 中显示所有票证，有人可以帮我解决这个问题吗？ tnx。

Answer 1

这可能是因为在数据具有任何值之前就调用了渲染方法，导致您最终尝试映射未定义。

尝试将票证移至单独的函数并通过渲染调用它。

  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() 更新状态，而不是直接操作状态。