javascript - React - 带有确认从数组映射中删除的模态

Question

我正在构建一个应用程序，使用 ES6 map 显示数组中的项目列表。数组中的每个项目都包含一个文本和一个“删除”按钮。单击“删除”按钮将根据项目 ID 从数组中删除该项目。这是通过与 contextAPI 连接的函数内部的 reducer 调度触发的。

这是一个有效的基本代码:

import React, { useState, useContext} from "react";

//context
import { ListsContext } from "./listsContext";

function Lists() {
  const { items, dispatch } = useContext(ListsContext);

  return (
    <div>
      <h1>Lists</h1>
      {items.length ? (
        items.map(item => (
          <div>
            <ListTag
              key={item.id}
              item={item}
              remove={() => dispatch({ type: "REMOVE", id: item.id });}
            />
          </div>
        ))
      ) : (
        <p> No Categories, Insert a category </p>
      )}
    </div>
  );
}

function ListTag({ item, edit, confirm }) {
  return (
    <div className="list-tag">
      <div className="list-info">
        <p>{item.description}</p>
      </div>
      <div className="config-btn">
        <button onClick={remove}>Remove</button>
      </div>
    </div>
  );
}


export default Lists;

上面的代码将在单击“删除”按钮后立即从数组中删除该项目。我的目标是当单击“删除”按钮时有一个模式弹出窗口，用消息确认删除，类似于 Modal confirmation #1 - codesandbox或Modal confirmation #2 by Chris Geirman - codesandbox 。更多信息查看Stackoverflow discussion .

不幸的是，链接的示例不使用react-hooks、reducers 或contextAPI。我尝试过类似的方法，并且非常接近解决方案。单击项目“删除”按钮后，会弹出一个模式，其中包含删除确认消息和下面的两个按钮(删除和取消)。不幸的是，单击模式“删除”按钮不会根据项目 ID 删除正确的项目。例如，如果数组中有四个项目，则删除数组顶部的第一个项目(“数组一”)将最终删除底部的项目(“数组四”)。为了更好地理解发生了什么，请查看我的 codesandbox 中的示例.

我正在努力寻找使用弹出模式按 id 删除特定项目的解决方案。我做错了什么？有什么解决方案、推荐或更好的建议吗？

Answer 1

当您认为只需要从 Lists 返回一个模态而不是为每个列表项附加一个模态时，这个问题就可以轻松解决。单击列表项时，您可以将所选项目添加到状态并在模式中使用它:

function Lists() {

  const { items, dispatch } = useContext(ListsContext);

  // Store the selected item instead
  const [ selectedItem, setSelectedItem ] = useState();

  const deleteItem = item => {

    // Make sure your type and your reduce case label match
    dispatch({ type: "REMOVE_CATEGORY", id: item.id });
    setSelectedItem();
  };

  return (
    <Fragment>
      <div>
        <h1>Lists</h1>
        {items.length ? (
          items.map(item => (
            <div>
              <ListTag
                key={item.id}
                item={item}
                confirm={() => setSelectedItem(item)}
              />
            </div>
          ))
        ) : (
          <p> No Categories, Insert a category </p>
        )}
      </div>

      // Confirm is now at the end of the list
      // We pass in the selected item
      <Confirm
        item={selectedItem}
        remove={deleteItem}
        cancel={() => setSelectedItem(false)}
      />
    </Fragment>
);
}

function ListTag({ item, edit, confirm }) {
  return (
    <div className="list-tag">
      <div className="list-info">
        <p>{item.description}</p>
      </div>
      <div className="config-btn">
        <button onClick={confirm}>Remove</button>
      </div>
    </div>
  );
}

function Confirm({ cancel, item, remove }) {
  return (
    <div>
      {item && (
        <Modal>
          <p>
            You are about to permanently delete <strong>{item.name}</strong>{" "}
            category. Are you sure you want to do this?
          </p>
          <button onClick={() => remove(item)}>Remove</button>
          <button onClick={cancel}>cancel</button>
        </Modal>
      )}
    </div>
  );
}

Sandbox