我试图从我的数据库中获取一些特定的数据,为了更具体和清晰,这里是一个例子: 我的数据库中有客户,他们的文档如下所示:
客户端 1:
_id:xxx
名称:abc
信用:100
客户端 2:
_id:yyy
名称:abcde
信用:0
我想在 flatlist 中显示信用 > 0 的客户的数据
我已经有一个显示所有数据的平面列表,它工作正常, 我希望我说清楚了,谢谢!
我正在使用 react native-nodejs
class Listtest extends React.Component{
constructor() {
super();
this.delayValue = 8000;
this.state = {
animatedValue: new Animated.Value(0),
search:'',
refreshing: true,
dataSource: [],
isLoading:true
}
}
onPresss = (item) => {
const Designation = item.Designation;
const Marque = item.Marque;
const PrixAchat = item.PrixAchat;
const PrixVente = item.PrixVente;
const MaxRemise = item.MaxRemise;
const QuantiteAlerte = item.QuantiteAlerte;
const QuantiteArticle = item.QuantiteArticle;
const Id_fournisseur = item.Id_fournisseur;
}
renderItem = ({item}) => {
this.delayValue = this.delayValue + 500;
const translateX = this.state.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [this.delayValue,1]
});
return(
<Animated.View
style={[styles.button, { transform: [{ translateX }] }]}>
<View style={{flex:1}}>
<TouchableOpacity
onPress={()=>this.onPresino(item)}>
<View style={{flexDirection:'row',padding:10}}>
<Avatar.Image
source={{uri:'https://i.ibb.co/xDJ6XBd/Articleimage.jpg'}}
size={50}/>
<Text style=
{{marginVertical:10,marginLeft:20,letterSpacing:1.7,fontWeight:'bold',fontSize:20,marginLeft:8}}>
{item.Designation}</Text>
</View>
</TouchableOpacity>
</View>
</Animated.View>
)
}
renderSeparator =() => {
return(
<View
style={{height:1,width:'100%',backgroundColor:'#ccc'}}>
</View>
)
}
async componentDidMount() {
Animated.spring(this.state.animatedValue, {
toValue: 1,
tension: 20,
useNativeDriver: true
}).start();
await fetch ('http://localhost:8080/api/articles',{
method:'get',
mode:'no-cors',
headers:{
'Accept':'application/json',
'Content-Type':'application/json'
},
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
dataSource:responseJson
})
})
.catch((error) =>{
console.log(error)
}
)}
render(){
return (
<View style={styles.container}>
<SearchBar
placeholder="Tapez ici..."
onChangeText={search => { this.setState({ search }) }}
value={this.state.search}
style={styles.search}
round="default"
lightTheme="default"
/>
<FlatList
pagingEnabled
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)}}
const styles=StyleSheet.create({
container: {
height: 300,
flex:1,
backgroundColor: '#FFF',
borderRadius: 6,
},
});
export default Listtest;
答案 0 :(得分:0)
您可以简单地使用 Array.prototype.filter()
。
<FlatList
pagingEnabled
data={this.state.dataSource.filter((value)=> value.credit > 0 )}
renderItem={this.renderItem}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={this.renderSeparator}
/>
您可以使用状态值更改 0
以更好地控制它。