时间戳

首页 > 解决方案 > 在 React 中的 TypeScript 中打开和关闭对话框的状态

reactjs - 在 React 中的 TypeScript 中打开和关闭对话框的状态

问题描述

我使用了一个材质-ui Dialog。由于我缺乏能力，该对话框无法重复打开和关闭。关闭对话框后，它没有再次打开记录器。我应该如何修复我的代码？我正在使用 React 和 Redux 。函数 OpenPepsi 在 Container 中。can 来自 Promise 对象。

function MainPage(props: Material) {
  return (
    <React.Fragment>
      <Link variant="h3" onClick={props.OpenPepsi}>
            OpenPepsiDialog
      </Link>
      <br />

      {props.can && (
          <PepsiDialog
            can ={props.can}
            isOpen={!!props.can}
          />
      )}



function PepsiDialog(props: {
  c: can;
  isOpen: boolean;
}) {
  const [open, setOpen] = React.useState(props.isOpen);
  const handleClose = () => {
    setOpen(false);
  };
  return (
    <Dialog  open={open} onClose={handleClose}>
      <React.Fragment>{c}</React.Fragment>
      );

行动

export const OPEN_PEPSI = () => async (dispatch: Dispatch) => {
  const can = await getPepsi(FOO);
  dispatch(OPEN_PEPSI_NOTIFY(can));
};

标签： reactjstypescriptredux

解决方案

这条线导致不正确的行为

const [open, setOpen] = React.useState(props.isOpen);

似乎您正在props.isOpen父级中更新并希望open在对话框中更新。但这行不通。的参数useState用于初始化状态，但不会在后续调用组件时更改它（直到它安装）。open所以要根据你更新变量props.isOpen应该添加useEffect如下

useEffect (() => setOpen(props.isOpen), [props.isOpen])

这种方式open将根据isOpen变化进行更新。

但是这种简化形式有一个缺点。can只有在 Redux 中更改为false，然后再次更改为 时，对话框才会重新打开true。所以也许你想将关闭状态传播回 Redux 存储。在这种情况下，连接PepsiDialog到 Redux 并can直接从 Redux 使用（删除 local useState）。或者，您可以将回调传递给PepsiDialog将在关闭时调用的回调，并且父MainPage级会将关闭状态传播到 Redux

推荐阅读