按特定字段搜索 Meteor React Native

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}
      />