javascript - 使用React钩子(Hook)如何一起更新2个钩子(Hook)，但彼此使用prevState

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

toggleSearchIsVisible是一个简单的布尔值，但是，setActiveFilter挂钩必须以先前的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('');
  }
};

任何其他建议表示赞赏！

最佳答案

尝试使用useEffect钩子来处理切换searchIsVisible布尔值的副作用。

这是一个例子：

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

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

您可以看到我也将[searchIsVisible]传递给useEffect挂钩以优化性能。

这将确保仅在useEffect更新时触发searchIsVisible：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，而当SHOW_ALL为searchIsVisible cc>，但如果不是这种情况，只需将订单切换回去即可。