如何从usestate钩中访问setState中的回调

Question

是否有人设法为React 16.8中的Usestate Hook的更新件创建同步回调？我一直在寻找一个，以便我可以与第三方库进行同步操作，并且似乎无法为我的需求做一个工作。

如果有人对成功完成此操作的人有任何参考，请在此处添加它们。

欢呼，

Answer 1

带有钩子，您不再需要setState函数的回调。现在，您可以使用useState挂钩设置状态，并聆听其值以使用useEffect钩更新。useEffect挂钩的可选第二个参数需要一个值数组以聆听更改。在下面的示例中，我们只是监视一个值的值：

const Example = () => {
  const [value, setValue] = useState(null);
  useEffect(() => {
    // do something when value changes
  }, [value]);
  return (
    <button onClick={() => setValue('Clicked!')}>
      Click Me!
    </button>
  );
};

在此处阅读有关useEffect钩的更多信息。

Answer 2

您可以使用usefect/uselayouteffect实现这一目标：

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)
  React.useEffect(() => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);
  return (
    <div>
      <p>{count}</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

如果您正在寻找一个开箱即用的解决方案，请查看此类自定义挂钩，该钩子像Usestate一样可用但接受为第二个参数a回调函数：

import useStateWithCallback from 'use-state-with-callback';
const SomeOtherComponent = () => {
  const [count, setCount] = useStateWithCallback(0, count => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  });
  return (
    <div>
      <p>{count}</p>
      <button type="button" onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

可以通过npm install use-state-with-callback

安装

如果要进行同步布局布局更新，请改用import { useStateWithCallbackInstant } from 'use-state-with-callback';。