React Todo列表点击删除按钮未删除对应索引数据问题求助

问题根源 #

• 调用deleteTodo时传入的是待办项的业务ID（key.id），但deleteTodo内部将传入值当做数组下标执行splice删除，业务ID和数组下标完全不匹配，自然会删除错误位置的数据。
• map遍历的参数命名存在误导：Array.map的第一个参数是当前遍历的元素对象，第二个参数才是数组下标，代码中写为(key, value)很容易混淆参数含义。
• 额外小问题：setTodos是React的异步状态更新方法，调用后立刻打印todos.length拿到的是更新前的旧值，不是最新的列表长度。

修复方案 #

推荐使用按业务ID过滤删除的方案，比依赖数组下标更稳定，就算后续列表做过排序、筛选也不会出现删错的问题：

修改后的完整代码 #

import { useEffect, useState } from "react";

const Task = () => {
    const [todos, setTodos] = useState([]);

    useEffect(() => {
        fetch('http://jsonplaceholder.typicode.com/todos')
            .then(res => res.json())
            .then(data => {
                setTodos(data)
            })
    }, []);

    const deleteTodo = (targetId) => {
        // 过滤掉id匹配的待办项，直接生成新数组
        const newTodos = todos.filter(todo => todo.id !== targetId);
        setTodos(newTodos);
        console.log(targetId);
        console.log(`newLength : ${newTodos.length}`);
    }

    return (
        <div className='container'>
            <table className='table'>
                <tbody>
                    {/* 修正map参数命名，直接用当前遍历的todo对象取值，代码更简洁 */}
                    {todos.map((todo) => (
                        <tr key={todo.id}>
                            <td>{todo.id}</td>
                            <td>{todo.title}</td>
                            <td>{`${todo.completed}`}</td>
                            <td>
                                <button className='btn btn-danger ' onClick={() => deleteTodo(todo.id)}> Delete </button>
                            </td>
                        </tr>
                    ))}
                </tbody>
            </table>
            <button className='btn btn-primary'>Add Task</button>
        </div>
    );
}
export default Task;

如果你一定要用下标删除的方案，只要把删除按钮的点击事件传参改为数组下标即可：

{todos.map((todo, index) => (
    // 其他代码不变
    <button className='btn btn-danger ' onClick={() => deleteTodo(index)}> Delete </button>
))}

内容的提问来源于stack exchange，提问作者coolhack7