如何通过单击按钮从反应状态挂钩数组中删除对象

Posted 2023-02-22

【中文标题】如何通过单击按钮从反应状态挂钩数组中删除对象

【英文标题】：How to delete objects from react state hook array with a button click

【发布时间】：2020-07-13 14:11:09

【问题描述】：

我正在尝试制作一个按钮，根据传递的索引从数组中删除一个对象（这是状态），我尝试了很多，但我的方法都没有奏效:(，所以这是代码和希望能找人帮忙：

状态：

const [items, setItems] = useState([ name: "", quantity: "", unit: "" ]);

删除函数：

const deleteItem = (i) => 
    const newItems = [...items]
    newItems.splice(i, 1)
    setItems(newItems)

jsx 元素：

    
        items.map((item, i) => 
            return (
                <div key=i className=`mt3 item-input-wrapper`>
                    <div>some other els here</div>
                    <button onClick=() => deleteItem(i) >delete item</button>
                </div>
            )
        )
    

【参考方案1】：

您可以使用filter：

const deleteItem = (i) => 
  setItems(currentItems => currentItems.filter((item, index) => index !== i));

尽管您可能会使用更多常量来访问项目，例如 id。

【讨论】：

没有用，它删除了该数组中的最后一个对象，而不是想要的索引