React应用点击删除图标报错：Cannot read properties of undefined (reading '_id')

算力阿峰

2026-7-19

错误原因分析

你遇到的Cannot read properties of undefined (reading '_id')错误，是因为在deleteTodo函数中尝试访问data.result._id时，data.result为undefined。可能有两个原因：

后端DELETE接口的返回结构和你预期的不一致，并没有返回result字段；
请求过程中出现错误，导致data本身就是undefined。

修复方案

1. 确认后端返回结构，修正字段访问

先检查后端DELETE接口的返回值。如果后端返回的是被删除的todo对象本身（比如{_id: "xxx", ...}），那么直接使用data._id即可：

const deleteTodo = async id => {
    try {
        const res = await fetch(api_base + '/todo/delete/' + id, { method: "DELETE" });
        if (!res.ok) throw new Error('删除请求失败');
        const data = await res.json();
        
        setTodos(todos => todos.filter(todo => todo._id !== data._id));
    } catch (err) {
        console.error('删除操作出错:', err);
    }
}

2. 增加数据校验与错误处理

如果后端确实会返回result字段，先校验data.result是否存在，同时捕获请求可能出现的错误：

const deleteTodo = async id => {
    try {
        const data = await fetch(api_base + '/todo/delete/' + id, { method: "DELETE" }).then(res => res.json());
        
        // 校验返回数据格式
        if (!data?.result) {
            console.error('接口返回数据格式不符合预期');
            return;
        }
        
        setTodos(todos => todos.filter(todo => todo._id !== data.result._id));
    } catch (err) {
        console.error('删除请求失败:', err);
    }
}