时间戳

首页 > 解决方案 > 使用钩子从数组中删除对象（useState）

reactjs - 使用钩子从数组中删除对象（useState）

问题描述

我有一个对象数组。我需要添加一个函数来从我的数组中删除一个对象，而不使用“this”关键字。

我尝试使用updateList(list.slice(list.indexOf(e.target.name, 1))). 这会删除数组中除最后一项之外的所有内容，我不确定为什么。

const defaultList = [
{ name: "ItemOne" },
{ name: "ItemTwo" },
{ name: "ItemThree" }]

const [list, updateList] = useState(defaultList);

const handleRemoveItem = e => {
    updateList(list.slice(list.indexOf(e.target.name, 1)))
}

return (
    {list.map(item => {
        return ( 
            <>
            <span onClick={handleRemoveItem}>x </span>
            <span>{item.name}</span>
            </>
        )}
    }

)

预期：单击的项目将从列表中删除。
ACTUAL：整个列表被删除，减去数组中的最后一项。

提前感谢您的任何意见！

标签： reactjstypescriptreact-hooks

解决方案

首先，span带有 click 事件的元素需要有一个name属性，否则在e.target. 话虽如此，e.target.name它是为表单元素（输入、选择等）保留的。因此，要真正利用 name 属性，您必须使用e.target.getAttribute("name")

此外，因为您有一个对象数组，所以使用它不会有效，因为当您迭代对象时list.indexOf(e.target.name)它正在寻找一个。string这就像说在里面找到“狗”[{}, {}, {}]

最后，array.slice()返回一个新数组，从您传递给它的索引处的项目开始。因此，如果您单击最后一项，则只会返回最后一项。

尝试这样的事情，而不是使用.filter()：codesandbox

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const defaultList = [
    { name: "ItemOne" },
    { name: "ItemTwo" },
    { name: "ItemThree" }
  ];

  const [list, updateList] = useState(defaultList);

  const handleRemoveItem = (e) => {
   const name = e.target.getAttribute("name")
    updateList(list.filter(item => item.name !== name));
  };

  return (
    <div>
      {list.map(item => {
        return (
          <>
            <span name={item.name} onClick={handleRemoveItem}>
              x
            </span>
            <span>{item.name}</span>
          </>
        );
      })}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

推荐阅读