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

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 时，我想所有模式都已打开，您只能看到最新的模式。

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

但是如果不为每个模态使用单独的 open 标志应该修复它，例如https://codesandbox.io/s/vigilant-banzai-byc4t

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

Using a Modal inside a list seems to pick the last value of the list

javascript

reactjs

semantic-ui-react