我如何從數組-React Native 中獲取特定值

Question

Hi I need help as to how do i get a specific value from an array in a web service i am using fetch method to get the data.It is in XML i am using a dependency to convert xml data to JSON.

 import React from "react"; import {StyleSheet,View,ActivityIndicator,FlatList,Text,TouchableOpacity} from "react-native"; export default class Source extends React.Component { static navigationOptions = ({ navigation }) => { return { title: "Source Listing", headerStyle: {backgroundColor: "#fff"}, headerTitleStyle: {textAlign: "center",flex: 1} }; }; constructor(props) { super(props); this.state = { loading: false, items:[] }; } FlatListItemSeparator = () => { return ( <View style={{ height: .5, width:"100%", backgroundColor:"rgba(0,0,0,0.5)", }} /> ); } renderItem=(data)=> <TouchableOpacity style={styles.list}> <Text style={styles.lightText}>{data.item.name}</Text> <Text style={styles.lightText}>{data.item.email}</Text> <Text style={styles.lightText}>{data.item.company.name}</Text> </TouchableOpacity> render(){ { if(this.state.loading){ return( <View style={styles.loader}> <ActivityIndicator size="large" color="#0c9"/> </View> )}} return( <View style={styles.container}> <FlatList data= {this.state.dataSource} ItemSeparatorComponent = {this.FlatListItemSeparator} renderItem= {item=> this.renderItem(item)} keyExtractor= {item=>item.id.toString()} /> </View> )} } const parseString = require('react-native-xml2js').parseString; fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master').then(response => response.text()).then((response) => { parseString(response, function (err, result) { console.log(response) }); }).catch((err) => { console.log('fetch', err) this.fetchdata(); }) const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff" }, loader:{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#fff" }, list:{ paddingVertical: 4, margin: 5, backgroundColor: "#fff" } });

我對本機和開發反應非常陌生，一般來說，我會非常感謝任何幫助。我需要分離元素並在應用程序中顯示特定元素。

Answer 1

據我從您的代碼中可以看出，您沒有將獲取的數據傳遞到您的 state 中。 您只是將其記錄在控制台中：

parseString(response, function (err, result) {
  console.log(response)
});

我認為您應該將以下部分添加到您的組件中：

1.首先設置function在你的構造函數中被調用，所以它可以訪問state：

constructor(props) {
 super(props);

 this.state = {
  loading: false,
  items:[]
 };

 this.fetchRequest = this.fetchRequest.bind(this)
}

2. 在render中創建實際的 function ：

    fetchRequest() { fetch('http://192.168.200.133/apptak_service/apptak.asmx/Get_Item_Master').then(response => response.text()).then((response) => { parseString(response, function (err, result) { this.setState({ items: response }); }); }).catch((err) => { console.log('fetch', err) }) }

3. 您需要調用fetchRequest function。 您可以在組件的生命周期方法中執行此操作：

    componentDidMount() { fetchRequest(); }

4. 最后一件事是正確創建您的Flatlist ：

    <FlatList data= {this.state.items} renderItem={({ item }) => <Item title={item.title} />} keyExtractor= {item=>item.id.toString()} />

您的數據源是this.state.items ，而不是this.state.dataSource 。

不幸的是，我不知道您的數據是什么樣的，所以我不知道keyExtractor和<Item>應該如何編寫。 我可以告訴你的是，你的物品需要唯一的 ID。

你可以在React Native 文檔中閱讀更多關於Flatlist的信息。