如何删除React Hooks/Redux应用程序中的特定列表项

Question

我得到了ListComponent，我希望所有todo项都能从我的redux存储中显示出来。

问题是，我如何通过单击旁边的按钮来知道要删除哪个特定的列表项？

我的ListComponent看起来像这样：

const ListComponent = () => {
const todoArray = useSelector(state => state.todos);
const dispatch = useDispatch();
const title = todoArray.length === 0 ? 'You have nothing to do?' : 'Your to do list:';
const deleteItem = () => {
// how can I know which item to delete?

dispatch(deleteTodo(item))

}

return ( 
<>
<div className="list-container">
<div className="title-container">
<h3> {title} </h3>
</div>

<div className="ul-container">
<ul className="todo-list">
{todoArray.map((item, i) => ( 
<li 
key={i}
id={i}
>
<p>{item} {i}</p> 
<span> Utworzono 21.11.2020 o 9:20</span>
<div className="action-buttons-container">
<button onClick={deleteItem} className="btn btn-sm btn-outline-danger" alt="delete">
<FontAwesomeIcon icon={faTrashAlt} /> 
</button>
</div>

</li>
))}

</ul>
</div>
</div>
</>
);
}

Answer 1

您需要在单击删除项目时传递id引用，这样在您知道要删除哪个项目之后。

要做到这一点，请在函数中添加您想要用来识别它的id或任何引用像这样

// in your .map add the id reference as parameter
<button onClick={() => deleteItem(item.id)} className="btn btn-sm btn-outline-danger" alt="delete">

//In your function
const deleteItem = (itemId) => {
// if you gonna filter the item in your action  
dispatch(deleteTodo(itemId))
// if you want to filter now and directly send the item to delete
const item = todoArray.find((item) => item.id === itemId)
dispatch(deleteTodo(item))    
}