javascript - 更改 react 钩子(Hook)后如何执行函数？

Question

当我在类组件中执行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 Hook ，因为它列在 useEffect Hook 的依赖项中。