Question

当前正在尝试转换在Material UI网站上找到的React + Material UI + Firebase模板。现在，我正在尝试(codesandbox)打开“注册”对话框组件。 setup的当前App.js具有以下功能：

openDialog = (dialogId, callback) => {
  const dialog = this.state[dialogId];

  if (!dialog || dialog.open === undefined || null) {
    return;
  }

  dialog.open = true;

  this.setState({ dialog }, callback);

};

我正在尝试将其转换为使用类似这样的钩子，但不确定如何使用回调函数：

const openDialog = e => {
  setDialog({ ...dialog, [e.target.name]: true });
};

Answer 1

您可以在useEffect挂接中调用回调。您需要将dialog.open作为对useEffect挂钩的依赖项，该挂钩仅在dialog.open更改时运行，

useEffect(() => {
  if (dialog.open) {
    callback();    //This is where you call your callback function
  }
},[dialog.open,callback])  //pass your function as dependency

Demo

更改状态后传递回调

1 个答案: