React页面重载时访问未加载变量报错问题求助

你的错误出在仅判断了notes不为undefined，但没考虑notes.filter(item => item.id == id)返回空数组的情况。当页面重载时，虽然notes已经加载完成（不是undefined），但可能不存在id匹配的笔记，此时filter返回空数组，[0]就是undefined，访问.Notes自然会抛出undefined is not an object的错误。

修复方案 #

方案1：先检查过滤结果是否存在元素 #

把过滤结果存为变量，先判断是否有匹配项再赋值：

useEffect(()=>{
    if(notes !== undefined){
        const matchedNotes = notes.filter(item => item.id == id);
        setNoteData(matchedNotes);
        // 先判断是否有匹配的笔记
        if(matchedNotes.length > 0){
            setMyNotes(matchedNotes[0].Notes);
        } else {
            // 没有匹配项时的处理，比如设为空数组或提示
            setMyNotes([]);
        }
    }
},[notes])

方案2：使用可选链操作符简化判断 #

用?.来安全访问属性，同时处理空值：

useEffect(()=>{
    if(notes !== undefined){
        const matchedNotes = notes.filter(item => item.id == id);
        setNoteData(matchedNotes);
        // 可选链会在matchedNotes[0]为undefined时返回undefined，避免报错
        setMyNotes(matchedNotes[0]?.Notes || []);
    }
},[notes])

额外建议 #

• 确认NotesContext中notes的初始状态，如果初始是[]而非undefined，可以把判断条件改成if(notes.length > 0)，更贴合实际场景。
• 重复执行notes.filter会造成冗余计算，统一存为变量能提升性能。

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