有没有人设法在 react 16.8 中为 useState 钩子的更新部分创建同步回调？我一直在寻找一个，以便我可以处理与 3rd 方库的同步操作，但我似乎无法满足我的需要。
如果有人对成功完成此操作的人员有任何参考，请在此处添加。
干杯，
如何从 useState Hook 访问像 setState 中的回调
IT技术
reactjs
react-hooks
2021-03-25 04:03:41
2个回答
使用钩子，您不再需要来自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挂钩的更多信息。
您可以使用 useEffect/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 但接受回调函数作为第二个参数：
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';改用。