Javascript React-Modal与确认从数组映射中删除

我正在构建一个应用程序，使用ES6地图在阵列中显示项目列表。数组中的每个项都包含一个文本和一个删除按钮。单击移除按钮将根据项目id从数组中移除项目。这是通过与和contextAPI连接的reducer dispatch inside函数触发的

下面是一个有效的基本代码：

从React导入React，{useState，useContext}； //上下文 从./ListsContext导入{ListsContext}； 功能列表{ const{items，dispatch}=useContextListsContext； 回来 列表 {items.length？ items.mapitem=> 分派{type:REMOVE，id:item.id}；} /> : 无类别，请插入类别

} ; } 函数ListTag{item，edit，confirm}{ 回来 {item.description}

去除 ; } 导出默认列表； 单击“删除”按钮后，上面的代码将立即从数组中删除该项。我的目标是在单击“删除”按钮时出现一个模式弹出窗口，用消息确认删除，类似于或。有关详细信息，请参阅

不幸的是，链接的示例没有使用react钩子、reducer或contextAPI。我已经尝试过类似的方法，我非常接近找到解决方案。单击“项目删除”按钮后，将弹出一个模式，其中包含删除确认消息，并且在其下方有两个按钮“删除和取消”。遗憾的是，单击“模式删除”按钮不会根据项目id删除正确的项目。例如，如果数组中有四个项目，则删除数组1顶部的第一个项目将最终删除底部数组4中的项目。为了更好地理解正在发生的事情，请查看我的示例

---

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

< P>当您认为只需要从列表返回的一个模式而不是附加到每个列表项的模式时，这可以很容易地解决。单击列表项时，您可以将所选项添加到状态，并在模式中使用：

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>
  );
}

---

模式附加在数组中的每个项上。现在我看到了问题，它现在变得更清楚了。此外，还可以通过项目而不是确认状态来激活调制解调器。非常感谢，我真的很感激。