我正在学习 React hooks，我只是尝试执行一个简单的函数来从列表中删除该项目。为此，我使用 find、indexOf 和 splice。在 onClick 函数中，我在 array.splice(indexOf, 1) 中使用 indexOf，但它仅返回列表中的项目。所有内容都会重新渲染并执行其应该执行的操作，但唯一渲染的项目是我刚刚尝试删除的项目。我缺少什么？const [todos, setToDo] = useState(initialToDo);const [input, setInput] = useState('');const todoList = (todos) => { return ( todos.map((todo) => { return ( <div className='todo-list flex p-2 w-1/2 justify-between'> <p className="px-3">{todo.name}</p> <button className='rounded-sm border-2 px-2' onClick={(e)=>{ let item = todos.find(el=>el.id == todo.id); console.log(item) let index = todos.indexOf(item); console.log(index) todos = todos.splice(index, 1) // todos == item setToDo(todos) }} >-</button> </div> )}))}
3 回答
守着星空守着你
TA贡献1799条经验 获得超8个赞
是的，Array.splice返回删除的元素并改变原始数组，这意味着您可以用来index 从列表中删除/更新待办事项todos。
执行此操作的最简单方法是以下方法。这是工作示例
const todoList = () => {
const [todos, setToDo] = useState(initialToDo);
const [input, setInput] = useState('');
const handleDelete = index => {
todos.splice(index, 1)
setToDo([...todos])
}
return (
todos.map((todo, index) => {
return (
<div className='todo-list flex p-2 w-1/2 justify-between'>
<p className="px-3">{todo.name}</p>
<button
className='rounded-sm border-2 px-2'
onClick={() => handleDelete(index)}
>
-
</button>
</div>
)}))
}
慕慕森
TA贡献1856条经验 获得超17个赞
使用filter而不是使用 进行变异splice。试试这个片段。
const TodoList = () => {
const [todos, setTodos] = React.useState([
{ name: 'a', id: 1 },
{ name: 'b', id: 2 },
]);
return todos.map((todo) => {
return (
<div>
<p>{todo.name}</p>
<button onClick={() => setTodos(todos.filter(item => item.id !== todo.id))} > - </button>
</div>
);
});
};
const domContainer = document.querySelector('#app');
ReactDOM.render(<TodoList />, domContainer);
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<div id="app"> </div>
陪伴而非守候
TA贡献1757条经验 获得超8个赞
splice返回已删除的项目。我建议使用filter类似的东西：
setToDo(todos.filter(({ id }) => id != todo.id));添加回答
举报
0/150
提交
取消