React native 使用SectionList响应本机搜索

我创建了一个

分区列表

，并尝试为我的

分区列表

实现一个搜索过滤器。但是我的输出有一个错误。我在下面截图。我不知道怎么了

这是我的组件

export default class Cluster1 extends Component{
 constructor(props){
super(props)
this.state = {
  dataToShow: '',
  search: false
}
} 
searchUpdated = (term) => {
let matchedItemsArray = []
if(term === ''){
  this.setState({search: false, dataToShow: ClusterData})
}else{
  this.state.dataToShow.map((item) => {
    if(item.title.includes(term)){
      matchedItemsArray.push(item)
    }
  })
  this.setState({search: true, dataToShow: matchedItemsArray})
}
}
searchUpdated = (input) => {
  let userInput =[]
if(input === ''){
  this.setState({search: false})
  userInput = ''
}else{
  this.setState({search: true})
}
}
render(){       
 return(        
     <View style={styles.container}>         
    <TextInput 
      onChangeText={(term) => { this.searchUpdated(text) }} 
      style={styles.searchInput}
      placeholder="Type a mood to search"
      />        
      <SectionList
          renderItem = {({item, index}) => 
           <SectionListItem item = {item} index = {index}/>}
          renderSectionHeader = {({section}) => 
         <SectionHeader 

            sections={this.searchUpdated()}
           keyExtractor = {(item) => item.name}/>}>
          </SectionList>     </View>
 );
 }} 

class SectionHeader extends Component {
 render() {        
     return (            
         <View style={styles.header}>  
             <Text style={styles.headertext}>
             {this.props.section.title}       
             </Text>
             <TouchableOpacity onPress={ () => Actions.SongList({ section: this.props.section}) }>
               <Text style ={styles.Play}> Play
               </Text>
               </TouchableOpacity>

         </View>
     );  }
  }
class SectionListItem extends Component{
 render(){       
     return(
         <View>
         <Text style={styles.moodname}>{this.props.item.name}</Text>
         </View>
     );
 }}

---

这里有一个简单的搜索过滤器：

我添加了一个

search

状态来帮助确定用户当前是否正在搜索

构造函数（道具）{
超级（道具）
此.state={
dataToShow:“”，
搜索：false
}
}

它如何将（）映射到我可以引用的任何地方？对不起，我是新手，我的打字错误不是花括号。我仍然无法使用搜索过滤器请检查我的更新答案，看看它是否有效。顺便说一句，您能解释一下您的

textInput

中的

this.filterray（text）

是什么吗？既然您的搜索函数名为

searchUpdated（）

，那么您不应该改为

这个.searchUpdated（text）

？此外，您可能需要将用户的输入更改为所有小写或大写，并将其与转换为所有小写或大写的章节标题进行比较。我更新了编码并遵循了您的说明，但仍然是相同的

props.sections.reduce

是的，应该是` this.searchcUpdated（text）my bad

const ClusterData = [
{ title: 'Cluster1', 
data: 
[
{name: 'passionate'},{name: 'rousing'},{name: 'confident'},
{name: 'boisterous'},{name: 'rowdy'}],
},
{ 
 title: 'Cluster2', 
 data: 
[
 {name: 'rollicking'},{name: 'cheerful'{name: 'fun'},{name: 'sweet'},
{name: 'amiable'},{name: 'natured'}],