在react-native中使用嵌套数组中的onChangeText过滤每个单独的值

时间:2018-03-15 11:59:23

标签: javascript angularjs react-native

我有一个包含嵌套子节点的数组,子节点可以是一个或多达n个值,我正在尝试在我的组件中实现本地过滤器当用户在textInput 中输入任何内容时,应用程序将根据他/她输入的字词开始向用户显示建议。该建议将来自我预定义的数组。

这是我现在正在使用的代码: -

export function onSearch(categoryList, searchText) {
    var searchList = [];
    return function(dispatch) {
       categoryList.map((item, i) => {
           if (item.title.includes(searchText)) {
             searchList.push(item);
           }
       });
       dispatch({
         type: types.Search_Success,
         payload: searchList
       });
    };
}

AS在上面的方法中你可以看到代码只会过滤值到父值,所以我试图通过添加条件来添加代码: -

if(item.children.length>0){
    item.children.map((item, i) => {
        if (item.title.includes(searchText)) {
            searchList.push(item);
        }
    });
}

问题是我可以有很多孩子,所以我不能把这样的条件放在代码中

这是我的数组的样子: -

[{
    "id": "38",
    "title": "What's New",
    "url": "what-is-new"
}, {
    "id": "20",
    "title": "Women",
    "url": "women",
    "children": [{
        "id": "21",
        "title": "Tops",
        "url": "tops-women",
        "children": [{
            "id": "23",
            "title": "Jackets",
            "url": "jackets-women"
        }, {
            "id": "24",
            "title": "Hoodies & Sweatshirts",
            "url": "hoodies-and-sweatshirts-women"
        }, {
            "id": "25",
            "title": "Tees",
            "url": "tees-women"
        }, {
            "id": "26",
            "title": "Bras & Tanks",
            "url": "tanks-women"
        }]
    }, {
        "id": "22",
        "title": "Bottoms",
        "url": "bottoms-women",
        "children": [{
            "id": "27",
            "title": "Pants",
            "url": "pants-women"
        }, {
            "id": "28",
            "title": "Shorts",
            "url": "shorts-women"
        }]
    }]
}, {
    "id": "11",
    "title": "Men",
    "url": "men",
    "children": [{
        "id": "12",
        "title": "Tops",
        "url": "tops-men",
        "children": [{
            "id": "14",
            "title": "Jackets",
            "url": "jackets-men"
        }, {
            "id": "15",
            "title": "Hoodies & Sweatshirts",
            "url": "hoodies-and-sweatshirts-men"
        }, {
            "id": "16",
            "title": "Tees",
            "url": "tees-men"
        }, {
            "id": "17",
            "title": "Tanks",
            "url": "tanks-men"
        }]
    }, {
        "id": "13",
        "title": "Bottoms",
        "url": "bottoms-men",
        "children": [{
            "id": "18",
            "title": "Pants",
            "url": "pants-men"
        }, {
            "id": "19",
            "title": "Shorts",
            "url": "shorts-men"
        }]
    }]
}]

不,我想要的是当我输入“m”时它应该给我所有包含“m”的标题。

如果我对我的问题不太清楚,请告诉我。

此致

1 个答案:

答案 0 :(得分:1)

我建议编写一个可以解决问题的递归函数,如下所示:

export const onSearch = (categoryList, searchText) => {
  return dispatch => {
    const suggestions = []

    const addToSuggestions = item => {
      if (item.title.includes(searchText)) {
        suggestions.push(item)
      }
      if (item.children) {
        item.children.forEach(addToSuggestions)
      }
    }

    categoryList.forEach(addToSuggestions)

    dispatch({
      type: types.Search_Success,
      payload: suggestions
    })
  }
}