javascript - 我如何从数组-React Native 中获取特定值

问题描述

嗨，我需要有关如何从 Web 服务中的数组中获取特定值的帮助，我正在使用 fetch 方法获取数据。它是在 XML 中，我正在使用依赖项将 xml 数据转换为 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"
   }
});

我对本机和开发反应非常陌生，一般来说，我会非常感谢任何帮助。我需要分离元素并在应用程序中显示特定元素。

标签： javascriptreact-native

解决方案

据我从您的代码中可以看出，您没有将获取的数据传递给您的状态。您只是将其记录在控制台中：

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

我认为您应该将以下部分添加到您的组件中：

1. 首先在构造函数中设置要调用的函数，以便它可以访问状态：

constructor(props) {
 super(props);

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

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

在里面创建实际的函数render：

 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)
    })
  }

您需要调用该fetchRequest函数。您可以在组件的生命周期方法中执行此操作：
```
componentDidMount() {
  fetchRequest();
}
```

最后一件事是正确创建您的Flatlist：

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

您的数据源是this.state.items，而不是this.state.dataSource。

不幸的是，我不知道您的数据是什么样的，所以我不知道应该如何编写keyExtractorand 。<Item>我可以告诉你的是，你的物品需要唯一的 ID。

Flatlist您可以在React Native 文档中阅读更多信息。

javascript - 我如何从数组-React Native 中获取特定值

问题描述

解决方案

推荐阅读