我正在尝试使用react-native在我的应用程序中编写搜索功能,但是它不起作用

时间:2019-06-25 09:18:11

标签: javascript react-native searchbar

我正在编写搜索功能(“搜索”选项卡),以从应用程序中的整个数据(“首页”和“信息”选项卡)中搜索匹配的信息。但是它显示“ item.content.includes不是函数”。

当我调用item.conten t通过WebView显示html页面时,它可以工作。但是我不明白为什么在函数中调用它时不起作用。

const sourceData = {
    docSample: require('../../docHTML/docSample.html'),
    tableSample: require('../../docHTML/tableSample.html'),
    imageSample: require('../../docHTML/imageSample.html')
}

const data = [
    { key: "1", content : sourceData.docSample },
    { key: "2", content : sourceData.tableSample },
    { key: "3", content : sourceData.imageSample },
]

export default class SearchPage extends Component {

    state = {
        search: '',
        searchResult: []
    }

    searchFilterFunction = text => {
        const searchResult = data.filter( item => {
            return item.content.includes(text)
        });
        this.setState({search: text, searchResult: searchResult})
    }

    updateSearch = search => {
        this.setState({search})
    }

    renderSeparator = () => {
        return (
            <View
               style={{
               height: 1,
               backgroundColor: "#CED0CE"
               }}
            />
        )
    }

    renderItem = () => (
          <View>
              {{searchResult} ? 'match' : 'not match' }   
          </View>
    )

    render() {
        return (
          <View>
           <MyHeader />
           <SearchBar
              placeholder="Taper Ici..."
              onChangeText={this.searchFilterFunction}
              value={this.state.search}
              lightTheme
              round
           />
           <FlatList
              data={this.state.searchResult}
              renderItem={this.renderItem}
              ItemSeparatorComponent={this.renderSeparator}
           />
          </View>
        )
    }
}

0 个答案:

没有答案