import React, { Component } from "react";

import {
  AppRegistry,
  StyleSheet,
  FlatList,
  Text,
  View,
  Alert,
  ActivityIndicator,
  Platform
} from "react-native";

class UserList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: true
    };
  }

  componentDidMount() {
    fetch("http://000.000.0.000:0000/api/useraccount/user", {
      method: "GET",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        "auth-token": "my token"
      }
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          isLoading: false,
          // dataSource: JSON.parse(responseJson),
          dataSource: JSON.stringify(responseJson) //===>i think this is were problem
        });
        if (responseJson) {
          Alert.alert("Id is" + JSON.stringify(responseJson)); //==>this give me an alert
          console.log(responseJson);
        } else if (responseJson.error) {
          Alert.alert(responseJson.error);
        }
      })

      .catch(error => {
        console.error(error);
      });
  }

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 60,
          width: "100%",
          backgroundColor: "grey"
        }}
      />
    );
  };

  render() {
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={styles.MainContainer}>
        <FlatList
          data={this.state.dataSource}
          ItemSeparatorComponent={this.FlatListItemSeparator}
          renderItem={({ item }) => <Text> {item.name} </Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    );
  }
}

export default UserList;

const styles = StyleSheet.create({
  MainContainer: {
    justifyContent: "center",
    flex: 1,
    margin: 10,
    paddingTop: Platform.OS === "ios" ? 20 : 0
  },

  FlatListItemStyle: {
    padding: 10,
    fontSize: 18,
    height: 44
  }
});
0
Ranjith Kumar 14 नवम्बर 2019, 13:23

3 जवाब

FlatList वस्तुओं की एक सरणी की अपेक्षा करता है। आप this.state.dataSource में एक स्ट्रिंग पास कर रहे हैं। इसके अलावा, यदि आप पहले से ही response.json के साथ प्रतिक्रिया डेटा को हल करते हैं, तो आपको इसे JSON.parse के साथ फिर से पार्स करने की आवश्यकता नहीं है।

निम्नलिखित को बदलें

dataSource: JSON.stringify(responseJson)

साथ

dataSource: responseJson

सुनिश्चित करें कि responseJson एक सरणी है।

0
Patrick Wozniak 14 नवम्बर 2019, 13:33
सबसे पहले मैंने प्रतिक्रिया जेसन का उपयोग किया था, लेकिन यह मेरे लिए काम नहीं करता था और स्ट्रिंग विधि का उपयोग करने के बाद मैं इसे अलर्ट संदेश में प्रदर्शित करने में कामयाब रहा
 – 
Ranjith Kumar
14 नवम्बर 2019, 13:59

अंत में समाधान मिला ...

फ्लैटलिस्ट के बजाय, विवरण प्रस्तुत करने के लिए प्रयुक्त सूची दृश्य ...

0
Ranjith Kumar 18 नवम्बर 2019, 07:48

सूचीदृश्य के बजाय फ़्लैटलिस्ट का उपयोग करने की अनुशंसा की जाती है जब आपके पास बड़ी मात्रा में डेटा होता है तो डेटा तदनुसार प्रदर्शित होता है जब उपयोगकर्ता अधिक जानकारी की तलाश में नीचे स्वाइप करता है

0
Daniel Sosa 24 अक्टूबर 2020, 00:49