React(TypeScript)中用父组件数据预填充Dialog表单问题

问题根源 #

1. 表单无数据填充：父组件调用DialogBox时未传递获取到的posts数据，导致子组件无法拿到预填充值；
2. TypeScript类型错误：子组件的PostData被定义为可选属性（带?），TypeScript判定其可能为undefined，直接访问PostData.email会触发'PostData' is possibly 'undefined'错误。

修复步骤 #

1. 父组件：传递数据给Dialog子组件 #

在DialogBox组件的调用中，添加PostData属性，将父组件的posts数据传递过去：

// 父组件中修改DialogBox调用代码
<DialogBox isOpen={open} PostData={posts || undefined} />

注：posts类型为Post | null，通过posts || undefined转换为子组件期望的Post | undefined类型。

2. 子组件：处理类型错误并实现预填充 #

针对PostData可能为undefined的情况，提供两种常用解决方案：

方案一：安全访问属性（推荐）

使用可选链操作符（?.）确保属性访问安全，搭配空值合并操作符（||）给空值设置默认空字符串：

<TextField
  autoFocus
  required
  margin="dense"
  id="name"
  name="email"
  label="Email Address"
  type="email"
  fullWidth
  variant="standard"
  value={PostData?.email || ''}
/>

方案二：条件渲染表单

如果希望在无数据时隐藏表单或显示提示，可以用条件渲染：

{PostData ? (
  <TextField
    autoFocus
    required
    margin="dense"
    id="name"
    name="email"
    label="Email Address"
    type="email"
    fullWidth
    variant="standard"
    value={PostData.email}
  />
) : (
  <DialogContentText>暂无数据可编辑</DialogContentText>
)}

3. 子组件冗余代码优化 #

子组件中定义的open状态、handleClickOpen方法是冗余的，直接使用父组件传递的isOpen和onClose即可：

const DialogBox: React.FC<DialogProps> = ({ PostData, isOpen, onClose }) => {
  // 使用父组件的onClose，若无则设置空函数兜底
  const handleClose = onClose || (() => {});

  return (
    <React.Fragment>
      <Dialog
        open={isOpen}
        onClose={handleClose}
        PaperProps={{
          component: 'form',
          onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
            event.preventDefault();
            const formData = new FormData(event.currentTarget);
            const formJson = Object.fromEntries(formData.entries());
            const email = formJson.email;
            console.log(email);
            handleClose();
          },
        }}
      >
        <DialogTitle>Dialog</DialogTitle>
        <DialogContent>
          <DialogContentText>Edit Email address</DialogContentText>
          <TextField
            autoFocus
            required
            margin="dense"
            id="name"
            name="email"
            label="Email Address"
            type="email"
            fullWidth
            variant="standard"
            value={PostData?.email || ''}
          />
        </DialogContent>
        <DialogActions>
          <Button type="submit">Edit</Button>
          <Button onClick={handleClose}>Cancel</Button>
        </DialogActions>
      </Dialog>
    </React.Fragment>
  );
};

内容的提问来源于stack exchange，提问作者user17449555