0

我已经实现了一个搜索栏作为平面列表的标题，它显示了我的 api 数据（平面列表工作正常）但搜索栏不起作用，我尝试了几个代码但仍然不起作用如果有人可以帮助我解决这个问题会很感激的:)

我的 API 显示一个文档，其中包含： -Titre(String) -Montant(Number) I want to search by Titre 。这是我尝试过的最后一个代码：

   class listDépenses extends React.Component{ 
   constructor() {
   super();
   this.state = {
   refreshing: true,
   dataSource: [],
   Montant:'',
   Titre:'',
   modalVisible:false,

   loading: false,      
   data: [],      
   error: null, 
   }
   this.arrayholder = [];
   }

   renderItem = ({item}) => {

   <View style={{flex:1}}>
   <Text style={[globalStyles.sousTitre,{marginVertical:10,marginLeft:10}]}>{item.Titre}</Text>
   <Text style={[globalStyles.sousTitre, 
        {marginVertical:10,marginLeft:40,textAlignVertical:'auto',opacity:0.8,fontWeight:'800'}]}> 
   {item.Montant}</Text>
    </View>}

    searchFilterFunction = text => {    
     const newData = this.arrayholder.filter(item => {      
    const itemData = `${item.Titre.toUpperCase()}`;
    const textData = text.toUpperCase();
    return itemData.indexOf(textData) > -1;    
    });


    renderHeader = () => { 
   return(   
    <SearchBar
    placeholder="Tapez ici..."
    onChangeText={text => this.searchFilterFunction(text)}
    round="default"
    lightTheme="default"
   />
   ) 
   }
  this.setState({ data: newData });  
   };
 
  async componentDidMount() {
   await fetch ('http://192.168.1.10:8080/api/depenses',{
   method:'get',
   mode:'no-cors',
   headers:{
  'Accept':'application/json',
  'Content-Type':'application/json'
   }})
   .then((response) => response.json())
   .then((responseJson) => {
   this.setState({
    dataSource:responseJson,
   data: responseJson.results,          
   loading: false,   
   })
  this.arrayholder = responseJson.results;      

 })
.catch((error) =>{
 console.log(error) 
})}
   
    render(){
    return (

    <View style={{flex:1}}>


  <View style={{marginBottom:10}}></View>
  
   <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={(item, index) => index}
        ItemSeparatorComponent={this.renderSeparator}
        ListHeaderComponent={this.renderHeader}                             
      />

    </View>
4

1 回答 1

0

如果有人需要，我已经找到了解决方案：

     class listDépenses extends React.Component{
     constructor(props) {
     super(props);
    this.delayValue = 8000;

    this.state = {
     search:'', 
     dataSource: [],
     animatedValue: new Animated.Value(0),
     Montant:'',
     Titre:'',
     isLoading:true,
     modalVisible:false,
     }
      this.arrayholder=[]
      }

      componentDidMount() {
       Animated.spring(this.state.animatedValue, {
      toValue: 1,
     tension: 20,
     useNativeDriver: true
     }).start();
    return fetch('http://localhost:8080/api/depenses')
   .then((response )=> response.json())
    .then(responseJson => {
   this.setState({
   dataSource: responseJson,
   isLoading: false,
   },
  function() {
  this.arrayholder = responseJson;
   });})
.catch(error => { console.error(error);});}
  search = text => { console.log(text);
  };
 clear = () => { this.search.clear();
 };
 SearchFilterFunction(text) {
  const newData = this.arrayholder.filter(function(item) { const itemData = item.Titre 
  ? item.Titre.toUpperCase() :
  ''.toUpperCase();
  const textData = text.toUpperCase(); return itemData.indexOf(textData) > -1;
  });
  this.setState({ dataSource: newData, search: text,
  });
  }


 render(){

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

    <View style={styles.container}>
    <SearchBar 
     round="default"
     lightTheme="default"
     searchIcon={{ size: 25 }}
     onChangeText={text => this.SearchFilterFunction(text)} onClear={text => 
     this.SearchFilterFunction('')} placeholder="Tapez ici pour chercher..." value= 
     {this.state.search}
     />
    <View style={{marginBottom:10}}></View>
  
    <FlatList
    data={this.state.dataSource}
    renderItem={this.renderItem}
    keyExtractor={(item, index) => index.toString()}
    enableEmptySections={true} style={{ marginTop: 11 }}
    ItemSeparatorComponent={this.renderSeparator}
      />
    </View>
于 2021-05-01T23:01:24.730 回答