為什么我的 useState 數組沒有被清空？

Question

我的使用狀態：

const [valuesToSearchFor, setValuesToSearchFor] = useState([]);

我有以下帶有 onChange 的搜索輸入字段：

onChange={() => {
  setValuesToSearchFor(
  valuesToSearchFor.includes(value)
    ? valuesToSearchFor.filter(val => val !== value)
    : [...valuesToSearchFor, value]
  );
}}

這會像這樣更改我頁面上的一些數據：

{data.elements.filter((val) => {
  if(valuesToSearchFor.includes(val.name.toLowercase()){
      return val
  }
}

唯一的問題是當我刪除輸入字段時，它不會反映在數組中。 問題如何清空valUesToSearchFor ，以便可以在輸入中輸入另一個搜索？

Answer 1

很難說沒有看到更多的代碼，但你應該解構過濾后的valuesToSearchFor 。 否則，您將嘗試直接修改 state 道具

onChange={(e) => {
  const value = e.target.value;
  setValuesToSearchFor(
    valuesToSearchFor.includes(value)
    ? [...valuesToSearchFor.filter((val) => val !== value)]
    : [...valuesToSearchFor, value]
  );
}}

正如 @Amiratak88 指出的那樣，這將在每次擊鍵時將一個新值推送到您的數組。

同樣，不確定您要做什么，但您可以選擇使用更新/重置 state 的按鈕。

const MyComponent = () => {
  const [searchValue, setSearchValue] = useState("");
  const [valuesToSearchFor, setValuesToSearchFor] = useState([]);

  return (
    <>
      <input
        onChange={(e) => {
          setSearchValue(e.target.value);
        }}
      />
      <button
        onClick={(e) => {
          e.preventDefault();
          // update valuesToSearchFor with all unqiue values, including the current searchValue
          setValuesToSearchFor([...new Set([...valuesToSearchFor, searchValue])]);
        }}
      >
        Search
      </button>
      <button
        onClick={(e) => {
          e.preventDefault();
          setValuesToSearchFor([]);
        }}
      >
        Reset
      </button>
    </>
  );
};