时间戳

首页 > 解决方案 > 从 reactjs 中的键值对象过滤

javascript - 从 reactjs 中的键值对象过滤

问题描述

我正在创建搜索栏来过滤键值数据对象。我在进行搜索时收到过滤器不是功能错误。是否有任何其他功能可以过滤键值对对象？

数据 ：-

{
  meta_city : {
    label: "City"
    values: (5) ["DL", "KA", "GJ", "MH", "UP"]
   },
  meta_country : {
    label: "Country"
    values: (5) ["IN", "US", "CA"]
   }
}

处理搜索（filterData 数据是本地状态）：-

const handleSearchFilter = (event) => {
    const searchWord = event.target.value;
    const newFilter = Object.keys(filterData).map((key) => {
      filterData[key].filter((value) => {
        return value.includes(searchWord);
      });
    });
    setFilterData(newFilter);
  };

<div className="mp-input-field-container">
     <input
       className="mp-input"
       placeholder="Search"
       onChange={handleSearchFilter}                    
     />
</div>

标签： javascriptreactjssearchkey-value

解决方案

你应该reduce这样使用：

const handleSearchFilter = (event) => {
  const searchWord = event.target.value;
  const newFilter = Object.keys(filterData).reduce((result, key) => {
    if (filterData[key].values.includes(searchWord)) {
      result.push(filterData[key]);
    };
    return result;
  }, []);
  setFilterData(newFilter);
};

在这个例子中，我返回一个数组结果。如果你愿意，你可以返回一个对象。

推荐阅读