我正在構建一個有趣的搜索功能，react并且我有以下資料結構：

資料.js

export const data = [
  {
    "id": 1,
    "first_name": "James",
    "last_name": "Wattson",
    "gender": "M",
    "age": 43,
    "country": "USA",

  },
...

列出資料

如何將一些陣列方法應用于反應中的過濾器搜索

搜索查詢結果

如何將一些陣列方法應用于反應中的過濾器搜索

代碼

const App = () => {

  const [query, setQuery] = useState("");
  const filterKeys = ["first_name", "last_name", "gender", "age", "country"]

  const handleOnChange = (event) => {
    const filterQuery = data.filter(value => value.first_name.toLowerCase().includes(event.target.value))

    setQuery(filterQuery);
  }

  const tableResults = query.length > 0 ? query : data;

  return (
    <div className="form">
      <div>
        <input placeholder="search..." onChange={handleOnChange}/>
      </div>
      <div>
        <Table data={tableResults}/>
      </div>
    </div>
  );
};


export default App

我的搜索功能作業正常，但僅限于作為輸入的 first_name 資料。

我怎么可能更新const filterQuery變數邏輯，.some() array method以便能夠添加基于陣列filterKeys字串的過濾器，這是我可以搜索它們的值的附加鍵。

目標：能夠搜索到每個key的值，包括：first_name、last_name、gender、age、country。上面的代碼只能搜索 first_name 值

像這樣的東西

const filterQuery = data.filter(value => filterKeys.some(key => value[key].toLowerCase().includes(event.target.value)));

但這似乎不正確......因為它在打字時在 chrome 控制臺選項卡上崩潰。錯誤Uncaught TypeError: value[key].toLowerCase is not a function

uj5u.com熱心網友回復：

有時你得到typeof value[key]Number，Number 沒有方法toLowerCase()，所以你需要使用：

const filterQuery = data.filter(value => filterKeys.some(key => (value[key]   "").toLowerCase().includes(event.target.value)));

uj5u.com熱心網友回復：

如果您收到此錯誤：

value[key].toLowerCase 不是函式

...這意味著這value[key]不是一個字串（可能是null或undefined數字？）。“年齡”屬性就是這種情況，因為它似乎是數字。要靜默處理這種情況，請使用可選的鏈接 ( ) 運算子鏈接呼叫.toString并使所有屬性查找有條件：?.

value[key]?.toString()?.toLowerCase()?.includes(event.target.value)

uj5u.com熱心網友回復：

你handleOnChange的功能可能是這樣的：

我的解決方案不使用some陣列方法，只是另一種獲得你想要的方法（也不需要filterKeys）

  const handleOnChange = (event) => {
    const term = event.target.value;
    const filterQuery = data.filter((record) => {
      return (
        Object.values(record)
          .filter((r) => !Number.isInteger(r))
          .filter((r) => r.toLowerCase().includes(term)).length > 0
      );
    });

    setQuery(filterQuery);
  };

Object.values(record)將回傳所有的value記錄物件，之后，您需要使用filter來查找value包含的記錄event.target.value。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/482710.html

標籤：javascript 反应算法搜索数据结构

上一篇：隔天的簡單演算法

下一篇：使用HoarePartition的快速排序得到不正確的輸出