时间戳

首页 > 解决方案 > 使用 React 钩子如何同时更新 2 个钩子，但在其他钩子中使用一个的 prevState

javascript - 使用 React 钩子如何同时更新 2 个钩子，但在其他钩子中使用一个的 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('');
  }
};

任何其他建议表示赞赏！

标签： javascriptreactjsreact-hooks

解决方案

尝试使用钩子来处理切换布尔值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_ALLand的顺序SHOW_SEARCH，因为它似乎SHOW_SEARCH应该在searchIsVisibleis时显示false，并且SHOW_ALL应该在searchIsVisibleis时显示true，但如果不是这种情况，只需将顺序切换回来。

推荐阅读