时间戳

首页 > 解决方案 > React - 在一个功能组件中，使用钩子，我可以在一个 setState() 成功更改状态后执行一段代码吗？

javascript - React - 在一个功能组件中，使用钩子，我可以在一个 setState() 成功更改状态后执行一段代码吗？

问题描述

setState异步更新状态。据我了解，在使用类组件时，您可以执行以下操作以确保在setState更新状态后执行某些代码：

setState({color: red}, callbackThatExecutesAfterStateIsChanged);

我正在使用功能组件和挂钩。我知道，在这里，每次状态更改后和初始执行useEffect()时都会执行回调。color

useEffect(callback, [color]);

如何复制与类组件示例类似的行为 - 也就是说，在一个成功更改状态而不是在初始执行时执行一次代码块？ setState()

标签： javascriptreactjs

解决方案

如果你问我，使用钩子没有安全的方法来做到这一点。问题是您都必须阅读并设置initialized状态才能忽略第一次更新：

const takeFirstUpdate = (callback, deps) => {
  const [initialized, setInitialized] = useState(false);
  const [wasTriggered, setWasTriggered] = useState(false);

  useEffect(() => {
    if (!initialized) {
      setInitialized(true);
      return;
    }
    if (wasTriggered) {
      return;
    }
    callback();
    setWasTriggered(true);
  }, [initialized, wasTriggered]);
};

虽然钩子看起来很有效，但它会setInitialized(true)在开始时通过调用再次触发自身，因此也会触发回调。

您可以从 deps 数组中删除初始化值，并且该钩子现在可以工作 - 但是这会导致exhaustive-depslinting 错误。hook 将来可能会中断，因为它不是 hooks api 的“官方”用法，例如，React 团队正在处理的并发渲染功能的更新。

推荐阅读