如何在 MUI 对话框中显示“正确”的卡片数据答案

【问题标题】：How to display the "correct" card data in dialog with MUI如何在 MUI 对话框中显示“正确”的卡片数据
【发布时间】：2022-08-09 01:14:28
【问题描述】：

我正在尝试使用 MUI Card、CardAction 和 Dialog 实现一个选项来打开相应卡的对话框。

目前，我正在从 Firebase 获取所有数据并将它们中的每一个显示在单独的卡片中，并带有一个按钮以在对话框中查看它。截至目前，无论我选择哪张卡，此按钮都只会打开一个对话框并显示最后获取的数据。

如何在对话框中显示正确的卡数据，具体取决于我单击了哪个卡上的按钮？

例如：我在第四张卡上按“查看更多”，对话框将只加载第四张卡上的数据。

useEffect(() => {
    const getEvents = async () => {
      const data = await getDocs(eventsRef);

      data.forEach((doc) => {
        setEventList(data.docs.map((doc) => ({...doc.data(), id: doc.id})));
      })
    };
    getEvents();
  }, [])

  return (
    <>
      <div className=\"stepper-title\" style={{textAlign: \"center\"}}>
          <b><h1>Aankomende afspraken</h1></b><br></br><p>Prik een afspraak die jou intereseerd</p>
      </div>
      <div className=\"event-list-container\">
        {
          eventList && eventList.map(event => {
            {count++}
            return (
              <div key={event.id}>
                <Card variant=\"outlined\" sx={{ width: 250 }}>
                  <CardContent>
                      <Typography sx={{ fontSize: 14 }} color=\"text.secondary\" gutterBottom>
                        {event.date}
                      </Typography>
                      <Typography variant=\"h5\" component=\"div\">
                        {event.occasion.title}
                      </Typography>
                      <Typography sx={{ mb: 1.5 }} color=\"text.secondary\">
                        {event.location}
                      </Typography>
                      <Typography variant=\"body2\">
                        {event.occasion.description}
                      </Typography>
                  </CardContent>
                  <CardActions>
                    card {count}
                    <Button onClick={handleClickOpen} size=\"small\" eventid={event.id}>bekijken</Button>
                    <Dialog open={open} onClose={handleClose} PaperProps={{elevation: 1}} hideBackdrop>
                      {count}
                      <DialogContent>
                        <TextField
                          label=\"Titel\"
                          defaultValue={event.occasion.title}
                          fullWidth
                          variant=\"standard\"
                        />
                        <TextField
                          label=\"Description\"
                          defaultValue={event.occasion.description}
                          fullWidth
                          variant=\"standard\"
                        />
                        <TextField
                          label=\"Datum\"
                          defaultValue={event.date}
                          fullWidth
                          variant=\"standard\"
                        />
                        <TextField
                          label=\"Locatie\"
                          defaultValue={event.location}
                          fullWidth
                          variant=\"standard\"
                        />
                        <TextField
                          label=\"Naam\"
                          defaultValue={event.organizer.name}
                          fullWidth
                          variant=\"standard\"
                        />
                        <TextField
                          label=\"E-mailadres\"
                          defaultValue={event.organizer.email}
                          fullWidth
                          variant=\"standard\"
                        />
                      </DialogContent>
                      <DialogActions>
                        <Button onClick={handleClose}>terug</Button>
                        <Button onClick={handleClose}>Aanpassen</Button>
                      </DialogActions>
                    </Dialog>
                  </CardActions>
                </Card>
              </div>
              )
          })
        }
      </div>
    </>
  );
}

传递 doc 的 id 或保存在局部变量状态，然后您可以使用该 id 或 eventList.map((event, index) 获取索引向 firebase 发出请求，然后将其保存为局部变量，您可以获得正确的数据，如 <DialogContent> <TextField defaultValue={eventList[index]....sion.title} />

标签： reactjs firebase material-ui

【解决方案1】：

我也陷入了同样的问题 -我认为我们应该使用数据的“id”

【讨论】：