在列表中使用模态似乎会选择列表的最后一个值

Question

我有一个城市列表，我正试图在其中添加一个带有垃圾箱图标的模式，以删除每个项目旁边的城市。我的问题是，模态似乎为列表中的每个项目选择了列表的最后一项。当您单击列表中任何元素上的图标时，确认模式始终指向列表中的最后一个元素，我不确定自己在做什么错。 ：（

我尝试使用Confirm元素，而只是发现其使用下面的模态，并且得到相同的结果。

任何能帮助我解决此问题的专家都将不胜感激！

import React, { useState, useCallback } from "react";
import { List, Icon, Modal, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";

const CitiesList = () => {
  const [deleteButtonOpen, setDeleteButtonOpen] = useState(false);
  const cities = [{ name: "London" }, { name: "Paris" }, { name: "Porto" }];
  const handleConfirmDeleteCityModal = useCallback(city => {
    console.log("[handleConfirmDeleteCityModal] city", city);
    // dispatch(deleteCity(city))
    setDeleteButtonOpen(false);
  }, []);

  const showDeleteCityModal = useCallback(() => {
    setDeleteButtonOpen(true);
  }, []);

  const handleCancelDeleteCityModal = useCallback(() => {
    setDeleteButtonOpen(false);
  }, []);
  return (
    <List>
      {cities.map(c => (
        <List.Item>
          <List.Content className="list-item-content">
            <List.Header as="h4">{c.name}</List.Header>
          </List.Content>
          <List.Content floated="left">
            <Modal
              size="tiny"
              open={deleteButtonOpen}
              onClose={() => handleCancelDeleteCityModal()}
              trigger={
                <Icon
                  name="trash alternate outline"
                  size="small"
                  onClick={() => showDeleteCityModal()}
                />
              }
            >
              <Modal.Header>{`Delete City ${c.name}`}</Modal.Header>
              <Modal.Content>
                <p>Are you sure you want to delete this city?</p>
              </Modal.Content>
              <Modal.Actions>
                <Button negative>No</Button>
                <Button
                  positive
                  icon="checkmark"
                  labelPosition="right"
                  content="Yes"
                  onClick={() => handleConfirmDeleteCityModal(c)}
                />
              </Modal.Actions>
            </Modal>
          </List.Content>
        </List.Item>
      ))}
    </List>
  );
};

export default CitiesList;

这里是示例：https://codesandbox.io/s/optimistic-borg-56bwg?from-embed

Answer 1

问题可能是这样：

             <Modal
              size="tiny"
              open={deleteButtonOpen}
              onClose={() => handleCancelDeleteCityModal()}
              trigger={
                <Icon
                  name="trash alternate outline"
                  size="small"
                  onClick={() => showDeleteCityModal()}
                />
              }
            >

您使用单个标志deleteButtonOpen来控制所有模态的可见性。当您将其设置为true时，我想所有的模态都被打开了，您只会看到最新的模态。

通常，我会渲染单个模态，然后将要显示在其中的项目的内容作为道具传递。