根據多個輸入反應搜索或過濾數據

Question

我遇到了一個問題，我正在實現一個搜索字段，用戶可以在其中輸入多個字段，它會根據這些結果給出結果，即名稱、email 等。

數據object：

[
  {
   name:lorem,
   email:lorem@example.com
  }
]

假設有兩個搜索字段，一個用於名稱，另一個用於 email，如果用戶在兩個字段或一個字段中都輸入，它應該返回一個具有匹配屬性的數組。

i.e 
searchInput ={
   name:Lorem,
   email:lorem@example.com
}

result:
   [
      {
       name:lorem,
       email:lorem@example.com
      }
    ]

我正在像這樣存儲輸入值

const [searchInput, setSearchInput] = useState<any>({});
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    setSearchInput({ ...searchInput, [name]: value });
  };

<input type="text" onChange={handleChange} name="email">Name</input>

我在這里嘗試了多個答案，但到目前為止還沒有得到我想要的結果。

我已經解決了搜索問題，但現在我正面臨這個問題。 ********* 另一個問題 ********

const [users, setUsers] = useState<any>([...])
 const tempArr = [...users];
    const data = tempArr.filter((e: any) =>
      Object.keys(e).some(
        (key) =>
          e[key] &&
          searchInput[key] &&
          e[key]
            .toString()
            .toLowerCase()
            .includes(searchInput[key].toLowerCase())
      )
    );

    if (data.length) {
      setUsers(data);
    }

所以搜索按預期工作，但現在我丟失了原始數據，我必須重新加載頁面以獲取原始數據。 那么有沒有辦法在不丟失原始數據的情況下過濾數據。

解決方案：

const [searchInput, setSearchInput] = useState<any>(null); // change initial state to null

// Fetch the data if searchInput is null
useEffect(() => {
    if (!searchInput) {
       // Make the api call to fetch data
    }
  }, [searchInput]);

  //   Changes in input handler
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    if (!!value) {
      setSearchInput({ ...searchInput, [name]: value });
    } else {
      setSearchInput(null); // set null if there isn't any search input.
    }
  };

搜索 function 保持不變。

Answer 1

您可以嘗試其中之一：

• https://fusejs.io/
• https://github.com/bvaughn/js-search

// 下面忽略

嘗試使用useEffect掛鈎

useEffect(() => {
  // I suppose
  loadData(searchInput["email"], searchInput["name"])
}, [searchInput])

或者更清楚你想要的結果

Answer 2

...搜索按預期進行，但現在我丟失了原始數據，我必須重新加載頁面以獲取原始數據。

您正在失去 state 保真度，因為您正在用過濾值的結果覆蓋它。

const [users, setUsers] = useState<any>([...]);
const tempArr = [...users];
const data = tempArr.filter((e: any) =>
  Object.keys(e).some(
    (key) =>
      e[key] &&
      searchInput[key] &&
      e[key]
        .toString()
        .toLowerCase()
        .includes(searchInput[key].toLowerCase())
  )
);

if (data.length) {
  setUsers(data); // <-- overwrites the state!!
}

那么有沒有什么辦法可以在不丟失原始數據的情況下過濾數據。

是的，不要覆蓋state中的真實來源。使用保存的users state數組和過濾state值來導出渲染結果。 換句話說，在將users數組呈現給 UI 時進行內聯過濾。

例子：

users.filter((user: any) =>
  Object.keys(user).some((key) =>
    e[key] &&
    searchInput[key] &&
    e[key]
      .toString()
      .toLowerCase()
      .includes(searchInput[key].toLowerCase()
  ))
).map(user => (
  // ... returned JSX for `user` value
))