从reactjs中的键值对象中过滤

Question

我正在创建搜索栏来过滤键值数据对象。我在搜索时收到 filter is not a function 错误。在键值对对象中是否还有其他功能可以过滤？

数据：-

{
  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>

Answer 1

你应该这样使用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);
};

在这个例子中，我return正在处理一个数组结果。如果需要，您可以 return 对象。

Answer 2

字符串类型不存在过滤器。当调用 filterData[key] 时，key 的值为 label。 filterData["label"] returns 一个字符串 "City".

尝试

const searchWord = (word) => Object.values(filterData).filter((data) => data.values?.includes(word));

const handleSearchFilter = (event) => {
  const word = event.target.value;
  const [newFilter] = searchWord(word)
  setFilterData(newFilter);
}

searchWord returns 如果您搜索“DL”

[
  {
    label: 'City',
    values: [ 'DL', 'KA', 'GJ', 'MH', 'UP' ]
  }
]

这就是您想要的结果吗？

这是证明解决方案有效的代码片段：

var filterData = {
  meta_city : {
    label: "City",
    values: ["DL", "KA", "GJ", "MH", "UP"]
   },
  meta_country : {
    label: "Country",
    values: ["IN", "US", "CA"]
   }
}


const searchWord = (word) => Object.values(filterData).filter((data) => data.values.includes(word));


console.log(searchWord("DL"))

从reactjs中的键值对象中过滤

Filter from key value objects in reactjs

javascript

search

key-value

reactjs