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

Question

我正在构建一个 todo 应用程序，其中所有元素都插入到对象列表中，然后使用 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;

Answer 1

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

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

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

Answer 2

理解这一点的最好方法是通过解释示例。

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

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

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

正如您在 return 片段中看到的那样，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; 是必需的，所以我没有添加到代码中。

Answer 3

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

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

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

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

Removing Elements through button click within a map function?

javascript

reactjs

react-hooks

use-state