React删除笔记报错：无法在初始化前访问newNotes，请排查问题

核心错误点 #

• 变量未声明就使用：你在const newNotes = newNotes.filter(...)里，试图用还未初始化的newNotes创建新数组，直接触发了"无法在初始化前访问newNotes"的错误。
• 数据源错误：过滤操作应该基于组件现有的notes状态数组，而非未定义的newNotes。
• 命名冲突：filter回调的参数命名为notes，和外层的状态变量notes重名，导致回调内部无法正确访问原状态数组。

修正后的deleteNote函数 #

//Delete A Note
const deleteNote = (id) => {
    console.log("The node deleting with id" + id);
    // 基于原notes状态过滤，回调参数换为note避免命名冲突
    const newNotes = notes.filter((note) => note._id !== id);
    setNotes(newNotes);
}

额外优化建议 #

处理状态更新时，推荐使用函数式更新（尤其是新状态依赖旧状态时），避免闭包导致的状态不一致问题：

const deleteNote = (id) => {
    console.log("The node deleting with id" + id);
    setNotes(prevNotes => prevNotes.filter(note => note._id !== id));
}

这种写法无需直接访问notes变量，通过React提供的前一状态值计算新状态，逻辑更可靠。

内容的提问来源于stack exchange，提问作者Mirza M Azeem