搜索特定的场流星反应天然

Question

我尝试仅使用两个字段过滤搜索组件。现在，它返回列表中的所有字段。这意味着如果我的搜索是2，它将返回每个包含以某种方式的对象2。

JSON文件看起来像这样：

{
  "deputes" : [ {
    "depute" : {
      "id" : 1,
      "id_an" : "718902",
      "lieu_naissance" : "Brest (Finistère)",
      "nom_circo" : "Alpes-Maritimes",
      "nom_de_famille" : "Roussel",
      "num_circo" : 3

和一个看起来像这样的组件：

class Flat_List extends Component{
  constructor(props){
    super(props);
    console.log(props)
    this._handleResults = this._handleResults.bind(this);
    this.state = {
      data : null
    }
  }
  _handleResults(results){
    console.log('handle results')
    this.setState({data: results})
  }
   render() {
    let listitems = this.state.data
    if (this.state.data == null)  {
      listitems = this.props.deputies
    }
    return(
    <View>
      <SearchBar
        ref={(ref) => this.searchBar = ref}
        data={this.props.deputies}
        handleResults={this._handleResults}
        allDataOnEmptySearch = {true}
        showOnLoad = {true}
        hideBack
        autoCorrect= {false}
      />
      <List>
        <FlatList style={styles.flatListStyle}
          data={listitems}
          keyExtractor={(item)=> item._id}
          renderItem={({item})=>(
             <DeputyDetail deputy={item.depute} navigation={this.props.navigation} /> )} />
      </List>
    </View>

此组件只能通过两个字段搜索？{num_circo}和{nom}？

Answer 1

您可以从每个depute对象删除'id', 'id_an', 'lieu_naissance'字段，以便<SearchBar />不会搜索这些。

您可以添加以下代码以删除这些字段：

componentWillMount(){
    var removeObjProps = ['id', 'id_an', 'lieu_naissance'];
    var filteredDep = Object.assign({}, this.props.deputies);
    filteredDep.deputies.forEach(function(dep){
        removeObjProps.forEach(function (val) {
            delete dep.depute[val];
        });
    });
    this.setState({filteredDep})
}

并用：

替换您的搜索栏

   <SearchBar
        ref={(ref) => this.searchBar = ref}
        data={this.state.filteredDep}
        handleResults={this._handleResults}
        allDataOnEmptySearch = {true}
        showOnLoad = {true}
        hideBack
        autoCorrect= {false}
      />