当特定变量在不同函数中更新时如何使用回调

Question

我知道我们可以使用 useEffect 来设置回调以状态更改涉及特定变量，但是当我将类组件重构为使用钩子的组件时，我遇到了一个问题，我在三个不同的函数中设置了一个变量的状态(使用 setState(，每次我都为这些 setState 调用不同的回调。

如果我像这样声明一个useEffect：

useEffect(() => {
callback1();
callback2();
callback3();
}, [myVariable]);

每次myVariable更改时，我都会调用这 3 个回调函数，这不是我的意图，因为它们会相互干扰。

为了澄清事情，这是我在类组件中所做的：

function a () {
...
this.setState({myVariable: x}, () => do something that involves myVariable);
};
function b () {
...
this.setState({myVariable: y}, () => do another thing that involves myVariable);
};
function c () {
...
this.setState({myVariable: z}, () => do another thing that involves myVariable);
};

如何继续并为每个setMyVariable调用创建指定的回调？ 多谢！

Answer 1

为什么不直接在调用setMyVariable()的函数中调用正确的回调函数呢？

Answer 2

使用多个useEffects

useEffect(() => {
callback1();
}, [myVariable1]);

useEffect(() => {
callback2();
}, [myVariable2]);