为什么我的 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>
    </>
  );
};