javascript - 使用 React hooks 如何一起更新 2 个钩子(Hook)，但在另一个钩子(Hook)中使用其中一个的 prevState

Question

在下面的代码中，当我调用 _toggleSearch 时，我同时更新 2 个钩子(Hook)。

toggleSearchIsVisible 是一个简单的 bool 值，但是，setActiveFilter Hook 必须在之前的 searchIsVisible 状态中传递。

如何确定传入时其他状态尚未更新？或者我还应该如何重组一切？以前使用 setState 我可以轻松地传递以前的状态。

const [activeFilter, setActiveFilter] = useState('SHOW_ALL');
const [searchIsVisible, toggleSearchIsVisible] = useState(false);

const _toggleSearch = () => {
  setActiveFilter(searchIsVisible ? 'SHOW_SEARCH' : 'SHOW_ALL');
  toggleSearchIsVisible(!searchIsVisible);
};

我现在已经接受了:

const _toggleSearch = () => {
  if (searchIsActive) {
    setActiveFilter('SHOW_ALL');
    toggleSearchIsActive(false);
  } else {
    setActiveFilter('SHOW_SEARCH');
    toggleSearchIsActive(true);
    updateSearchValue('');
  }
};

任何其他建议表示赞赏!

Answer 1

尝试使用 useEffect Hook 来处理切换 searchIsVisible bool 值的副作用。

这是一个例子:

const _toggleSearch = () => {
  toggleSearchIsVisible(!searchIsVisible);
};

useEffect(() => {
  setActiveFilter(searchIsVisible ? 'SHOW_ALL' : 'SHOW_SEARCH');
}, [searchIsVisible]);

<小时/>

您可以看到我还将 [searchIsVisible] 传递给 useEffect Hook 以优化性能。

这将确保仅在更新 searchIsVisible 时触发 useEffect:https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

<小时/>

这是一个演示:https://codesandbox.io/s/l2901jr68l

我希望这会有所帮助。

注意:

此外，我还交换了条件中 SHOW_ALL 和 SHOW_SEARCH 的顺序，因为当 时，似乎应该显示 SHOW_SEARCH searchIsVisible 为 false，当 searchIsVisible 为 true 时，应显示 SHOW_ALL，但如果不是这种情况只需将顺序切换回来即可。