通过地图功能中的按钮单击删除元素？答案

【问题标题】：Removing Elements through button click within a map function?通过地图功能中的按钮单击删除元素？
【发布时间】：2021-12-28 00:15:59
【问题描述】：

我正在构建一个待办事项应用程序，其中所有元素都插入到对象列表中，然后使用 map() 函数进行映射。我正在尝试为每个地图添加一个按钮，一旦单击该按钮 - 将从列表中删除特定元素。我已经阅读了很多有关 useState 和 map() 连接的文档，但我仍然对如何实现这一点以及将特定元素连接到删除感到困惑。

import { useState } from "react";
const List = (props) => {
  return props.items.map((item) => {
    return (
      <>
        <div>
          <p>{item.item}</p>
          <p>{item.date}</p>
          <p>{item.id}</p>
        </div>
        {/* Below is the button im attempting to implement */}
        <button onClick={}>Remove Item</button>
      </>
    );
  });
};
export default List;

【问题讨论】：

标签： javascript reactjs react-hooks use-state

【解决方案1】：

根据您的解释，我有点理解您有待办事项，您需要通过单击删除按钮来删除一个项目，因此我制作了一个工作演示来获取虚拟项目并将其删除，请检查以下代码以删除项目。

list.js

import React from 'react';

import { useState } from 'react';
const List = (props) => {
  console.log(props);
  const [items, setItems] = useState(props.items);

  const remove = (item) => {
    console.log(item);
    let filteredArr = items.filter((el) => el.id !== item.id);
    setItems(filteredArr);
  };
  const listItems = items.map((item, i) => (
    <>
      <div>
        <p>{item.item}</p>
        <p>{item.date}</p>
        <p>{item.id}</p>
      </div>
      {/* Below is the button im attempting to implement */}
      <button onClick={() => remove(item)}>Remove Item</button>
    </>
  ));
  return <div>{listItems}</div>;
};
export default List;

app.js

import React from 'react';
import './style.css';
import List from './lists.js';

export default function App() {
  const items = [
    { id: 0, item: 'item 1', date: '22/12/2021' },
    { id: 1, item: 'item 2', date: '23/12/2021' },
    { id: 2, item: 'item 3', date: '24/12/2021' },
    { id: 3, item: 'item 4', date: '25/12/2021' },
  ];
  return (
    <>
      <List items={items} />
    </>
  );
}

工作演示链接：https://stackblitz.com/edit/react-n4z2qj?file=src/App.js

【讨论】：

【解决方案2】：

理解这一点的最好方法是解释一个例子。

好的，首先我们用 useState 钩子声明数组。我只是添加了一些值，但它们不是必需的。

函数add() 将创建一个新整数，该整数将是数组的最后一个整数加一，然后将其添加到 items 数组中。

函数remove(item)通过接收一个项目作为参数来过滤项目数组，然后使用filter() JS方法过滤它，该方法删除所有不通过条件的元素。

正如您在返回片段中看到的那样，onClick 事件处理程序传递了 item 参数，然后remove() 函数确切地知道要删除哪个元素。

function List() {
  const [items, setItems] = useState([0, 1, 2]);

  const add = () => {
    let newInt = items[items.length - 1] + 1;
    setItems([...items, newInt]);
  };

  const remove = (item) => {
    let filteredArr = items.filter((el) => el !== item);
    setItems(filteredArr);
  };

  return [
    <Fragment>
      <p>
        <button onClick={() => add()}>+ Add Item</button>
      </p>
      {items.map((item, index) => {
        return (
          <p key={index}>
            {item}
            <button onClick={() => remove(item)}>x</button>
          </p>
        );
      })}
    </Fragment>
  ];
}

注意：我假设你知道import { useState } from "react"; 和export default List; 是必需的，所以我没有添加到代码中。

【讨论】：

【解决方案3】：

你要找的是.filter，你可以把它放在.map前面。此外，您需要一个变量来跟踪已单击/删除的ids（如果您不想实际删除它们而只是隐藏它们）。

const deletedItems = [1,2,3,4,5];

props.items
.filter(item => !deletedItems.includes(item.id))
.map(item => {
// ...
})

【讨论】：