如何在 React 中使用钩子重置本地状态答案

【问题标题】：How to reset local state with hooks in React如何在 React 中使用钩子重置本地状态
【发布时间】：2021-10-26 04:30:57
【问题描述】：

我在抽屉上有一个过滤器，想在抽屉关闭时重置状态。有按人数、活动类型或输入值筛选。

这是本地状态。

    const [searchQuery, setSearchQuery] = useState<string>("");
      const [count, setCount] = useState<number>(1);
      const [checkedFilters, setCheckedFilters] = useState<string[]>([]);

这是过滤器。

  const activities = useMemo(() => {
    return allActivities.filter(
      (item) =>
        item.participants >= count &&
        item.activity.toLowerCase().includes(searchQuery)
    );
  }, [count, searchQuery, allActivities]);

【问题讨论】：

你是怎么关抽屉的？您是否有任何状态可以跟踪抽屉的打开和关闭状态？

标签： reactjs typescript react-hooks

【解决方案1】：

为了让已经给出的答案更完整，如果你想一次重置所有过滤器，我建议添加一个这样的函数：

function resetAllFilters() {
  setSearchQuery("");
  setCount(1);
  setCheckedFilters([]);
}

当您想重置所有过滤器时，您现在可以调用resetAllFilters()，如下所示：

<button onClick={resetAllFilters}/>Clear</button>

在您的情况下，您可以像在抽屉关闭时调用的事件一样使用该函数。

【讨论】：

【解决方案2】：

要知道如何重置state，首先你需要知道每个state的初始值是多少

const [searchQuery, setSearchQuery] = useState<string>(""); // initial value is ""
const [count, setCount] = useState<number>(1); // initial value is 1
const [checkedFilters, setCheckedFilters] = useState<string[]>([]); // initial value is []

知道初始值后，只需调用setState，初始值如下

setSearchQuery("");
setCount(1);
setCheckedFilters([])

【讨论】：

【解决方案3】：

要重置状态，您只需将其设置回空或您的预定义状态：

setSearchQuery("");

与/或

setCheckedFilters([]);

与/或

setCount(1);

【讨论】：