更改反应挂钩后如何执行 function？

Question

当我在 class 组件中执行 setState 时，我可以将回调传递给最后一个参数，并在更改 State 后执行回调：

this.setState({}, () => { *execute after changing state* })

我的例子：

const foo = () => {
   setOpen(false); 
   bar(); // this function should be performed after completion setOpen changing, but setOpen is async func
}

问题：如何在通过setOpen更新hook后立即执行bar()，参数为false？

Answer 1

你会这样做：

const [ isOpen, setIsOpen ] = useState( false );

useEffect(() => {

    if( !isOpen ) {

         bar();

    }

}, [ isOpen ]);

一旦检测到对isOpen的更改，就会触发useEffect挂钩，因为它列在useEffect挂钩的依赖项中。

Answer 2

根据我收集到的信息，您正在处理组件关闭时的一些动画，该bar是用于卸载组件的 function。

从技术上讲，您要寻找的是（如果 animation 需要500ms才能完成）是这样的：

// Add this line somewhere outside of your component, preferably in a helpers file.
const delay = ms => new Promise(res => setTimeout(res, ms));

const foo = async () => {
   setOpen(false);
   await delay(500) // Change this value to match the animation time
   bar();
}

这应该允许您的 animation 在卸载组件之前运行。