React Material Ui 对话框未显示正确的值答案

【问题标题】：React Material Ui Dialog not Displaying Correct ValuesReact Material Ui 对话框未显示正确的值
【发布时间】：2020-11-10 00:02:45
【问题描述】：

我正在尝试使用 react material ui 对话框，但我发现了一个问题，或者我做错了。我有一个对象 a ，当我单击列表中的 a 按钮时，它应该显示相应的 id 号，但它总是显示最后一个 id,index 的 id 号，有什么问题？是因为我循环调用它们并且同时调用了所有三个对话框吗？我应该怎么做才能基本上显示每个按钮的相应 ID。 ...

export default function AlertDialog() {
  const [open, setOpen] = React.useState(false);
  
  const a = [{ id: 1 }, { id: 2 }, { id: 3 }];

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <>
      <List>
        {a.map(({ id }, index) => {
          return (
            <>
              <ListItem button onClick={handleClickOpen}>
                {id}
              </ListItem>
              <Dialog
                open={open}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">{id}</DialogTitle>
                <DialogContent>
                  <DialogContentText id="alert-dialog-description" />
                </DialogContent>
              </Dialog>
            </>
          );
        })}
      </List>
    </>
  );
}

... 我的样本https://codesandbox.io/s/material-demo-k5s8k?file=/demo.js

【问题讨论】：

正在打开所有 3 个对话框，因为您使用相同的 open 变量控制所有 3 个对话框。最后一个对话框只是最上面的那个。如果您通过浏览器开发人员工具查看 DOM，您会发现所有 3 个都在那里。
是的，我看到了。那么，我现在该怎么办？为 Dialog 使用单独的组件？
你可以看到它在这里工作。 codesandbox.io/s/material-demo-loqv0?file=/demo.js

标签： javascript reactjs material-ui material-design

【解决方案1】：

正在打开所有 3 个对话框，因为您使用相同的 open 变量控制所有 3 个对话框。最后一个对话框只是最上面的那个。如果您通过浏览器开发者工具查看 DOM，您会看到所有 3 个都在那里。

你可以通过管理打开状态来解决这个问题，让你知道哪个 id 是打开的。

一种方法是将打开的对话框的 id 设置为状态：

import React from "react";
import Dialog from "@material-ui/core/Dialog";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import { List, ListItem } from "@material-ui/core";

export default function AlertDialog() {
  const [openId, setOpenId] = React.useState(null);
  const a = [{ id: 1 }, { id: 2 }, { id: 3 }];
  const handleClickOpen = id => {
    setOpenId(id);
  };

  const handleClose = () => {
    setOpenId(null);
  };

  return (
    <>
      <List>
        {a.map(({ id }, index) => {
          return (
            <>
              <ListItem button onClick={() => handleClickOpen(id)}>
                {id}
              </ListItem>
              <Dialog
                open={openId === id}
                onClose={handleClose}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
              >
                <DialogTitle id="alert-dialog-title">{id}</DialogTitle>
                <DialogContent>
                  <DialogContentText id="alert-dialog-description" />
                </DialogContent>
              </Dialog>
            </>
          );
        })}
      </List>
    </>
  );
}

【讨论】：