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

Question

我正在构建一个使用 ES6 显示数组中项目列表的应用程序map。数组中的每一项都包含一个文本和一个“删除”按钮。单击“删除”按钮将根据项目 ID 从数组中删除项目。这是由连接到 contextAPI 的函数内部的 reducer 调度触发的。这是一个有效的基本代码：import React, { useState, useContext} from "react";//contextimport { 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() {

  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>

  );

}