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

IT技术 javascript arrays reactjs filter react-hooks
2021-05-15 02:12:56

我正在尝试制作一个按钮,根据传递的索引从数组(这是状态)中删除一个对象,我已经尝试了很多,但我的方法都不起作用:(,所以这是代码,希望我可以找人帮忙:

状态:

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。