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;

上面的代码将在单击“删除”按钮后立即从数组中删除项目。我的目标是在单击“删除”按钮时有一个模态弹出窗口，用一条消息确认删除，类似于模态确认 #1 - 代码和框或模态确认 #2 由 Chris Geirman - 代码和框。有关更多信息，请查看Stackoverflow 讨论。

不幸的是，链接的示例没有使用 react-hooks、reducers 或 contextAPI。我尝试了类似的方法，并且非常接近解决方案。单击项目“删除”按钮后，会弹出一个模式，其中包含删除确认消息和其下方的两个按钮（删除和取消）。不幸的是，单击模态“删除”按钮不会根据项目 ID 删除正确的项目。例如，如果数组中有四个项目，删除数组顶部的第一个项目（“Array One”）将最终删除底部的项目（“Array Four”）。要更好地了解正在发生的事情，请查看我的代码和框中的示例。

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

Answer 1

当您认为只需要返回一个模态Lists而不是将模态附加到每个列表项时，这可以轻松解决。单击列表项时，您可以将所选项目添加到状态并在模态中使用它：function Lists() {&nbsp; const { items, dispatch } = useContext(ListsContext);&nbsp; // Store the selected item instead&nbsp; const [ selectedItem, setSelectedItem ] = useState();&nbsp; const deleteItem = item => {&nbsp; &nbsp; // Make sure your type and your reduce case label match&nbsp; &nbsp; dispatch({ type: "REMOVE_CATEGORY", id: item.id });&nbsp; &nbsp; setSelectedItem();&nbsp; };&nbsp; return (&nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <h1>Lists</h1>&nbsp; &nbsp; &nbsp; &nbsp; {items.length ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items.map(item => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ListTag&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={item.id}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; item={item}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; confirm={() => setSelectedItem(item)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p> No Categories, Insert a category </p>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; // Confirm is now at the end of the list&nbsp; &nbsp; &nbsp; // We pass in the selected item&nbsp; &nbsp; &nbsp; <Confirm&nbsp; &nbsp; &nbsp; &nbsp; item={selectedItem}&nbsp; &nbsp; &nbsp; &nbsp; remove={deleteItem}&nbsp; &nbsp; &nbsp; &nbsp; cancel={() => setSelectedItem(false)}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </Fragment>);}function ListTag({ item, edit, confirm }) {&nbsp; return (&nbsp; &nbsp; <div className="list-tag">&nbsp; &nbsp; &nbsp; <div className="list-info">&nbsp; &nbsp; &nbsp; &nbsp; <p>{item.description}</p>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div className="config-btn">&nbsp; &nbsp; &nbsp; &nbsp; <button onClick={confirm}>Remove</button>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; );}function Confirm({ cancel, item, remove }) {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {item && (&nbsp; &nbsp; &nbsp; &nbsp; <Modal>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; You are about to permanently delete <strong>{item.name}</strong>{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; category. Are you sure you want to do this?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={() => remove(item)}>Remove</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={cancel}>cancel</button>&nbsp; &nbsp; &nbsp; &nbsp; </Modal>&nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; </div>&nbsp; );}