Javascript 在flatlist中实现searchbar以搜索api数据

我已经实现了一个搜索栏作为平面列表的标题，它显示我的api数据（平面列表工作正常），但搜索栏不工作，我尝试了几个代码，但仍然不工作 如果有人能帮我，我将不胜感激：）

My API显示包含以下内容的文档： -滴度（弦） -蒙坦特（数字） 我想用乳头搜索。 以下是我尝试过的最后一个代码：

   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>

class listDépenses扩展了React.Component{
构造函数（）{
超级（）；
此.state={
令人耳目一新：是的，
数据源：[]，
蒙塔特：“，
标题：''，
modalVisible:错误，
加载：false，
数据：[]，
错误：null，
}
this.arrayholder=[]；
}
renderItem=（{item}）=>{
{item.Titre}
{item.Montant}
}
searchFilterFunction=文本=>{
const newData=this.arrayholder.filter（项=>{
const itemData=`${item.Titre.toUpperCase（）}`；
const textData=text.toUpperCase（）；
返回itemData.indexOf（textData）>-1；
});
renderHeader=（）=>{
报税表（
this.searchFilterFunction（text）}
round=“默认值”
lightTheme=“默认值”
/>
) 
}
this.setState（{data:newData}）；
};
异步组件didmount（）{
待命http://192.168.1.10:8080/api/depenses',{
方法：'get'，
模式：'no-cors'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
}})
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
数据来源：responseJson，
数据：responseJson.results，
加载：false，
})
this.arrayholder=responseJson.results；
})
.catch（（错误）=>{
console.log（错误）
})}
render（）{
返回(
索引}
ItemSeparatorComponent={this.renderSeparator}
ListHeaderComponent={this.renderHeader}
/>

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

     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> 

class listDépenses扩展了React.Component{
建造师（道具）{
超级（道具）；
该值=8000；
此.state={
搜索：“”，
数据源：[]，
animatedValue：新的Animated.Value（0），
蒙塔特：“，
标题：''，
孤岛加载：是的，
modalVisible:错误，
}
this.arrayholder=[]
}
componentDidMount（）{
Animated.spring（this.state.animatedValue{
toValue:1，
张力：20，
useNativeDriver：真的吗
}).start（）；
返回获取（'http://localhost:8080/api/depenses')
.then（（response）=>response.json（））
.然后（responseJson=>{
这是我的国家({
数据来源：responseJson，
孤岛加载：false，
},
函数（）{
this.arrayholder=responseJson；
});})
.catch（错误=>{console.error（错误）；}）；}
search=text=>{console.log（text）；
};
clear=（）=>{this.search.clear（）；
};
SearchFilterFunction（文本）{
const newData=this.arrayholder.filter（函数（项）{const itemData=item.Titre
？item.Titre.toUpperCase（）：
''.toUpperCase（）；
const textData=text.toUpperCase（）；返回itemData.indexOf（textData）>-1；
});
this.setState（{dataSource:newData，search:text，
});
}
render（）{
if（this.state.isLoading）{return(
);
}
返回(
this.SearchFilterFunction（text）}onClear={text=>
this.SearchFilterFunction（“”）}placeholder=“Tapez ici pour chercher…”值=
{this.state.search}
/>
index.toString（）}
enableEmptySections={true}style={{{marginTop:11}
ItemSeparatorComponent={this.renderSeparator}
/>