React useEffect调用自有API报错：无法读取undefined的'_id'属性

三个核心问题导致报错：

1. 控制台打印值存在「延迟求值幻觉」：你看到console.log输出的currentChat、currentUser有正确值，不代表执行到读_id那行代码时两个值已经完成赋值。浏览器控制台打印对象这类引用类型时，不会保存代码执行到该行时的对象快照，你手动点开控制台日志看到的，是对象最终被赋值后的状态。组件首次挂载执行useEffect时，这两个值大概率还处于初始的undefined状态，自然读不到_id属性。
2. 依赖数组不全+无空值拦截：你的useEffect依赖数组只写了currentChat，漏了currentUser，而且没有在发请求前判断两个值是否已经正确加载，首次effect执行时变量还没初始化完成就直接读属性，直接触发报错。
3. 基础语法错误：首行useState的解构写法完全错误，useState返回的是数组不是对象，用对象大括号解构会导致messages、setMessages直接为undefined，后续调用setMessages也会抛错。

直接替换成下面的写法即可：

// 修正：useState返回数组，用方括号解构
const [messages, setMessages] = useState([]);

useEffect(() =>{
    async function fetchMsg(){
        // 空值拦截：任意一个依赖值没加载完成，直接终止逻辑不发请求
        if (!currentChat?._id || !currentUser?._id) {
            return;
        }
        const response = await axios.post(getAllMessagesRoute, {
            from: currentUser._id,
            to: currentChat._id,
        })
        setMessages(response.data);
    }
    fetchMsg();
// 修正：把currentUser也加入依赖数组，避免闭包捕获旧值
}, [currentChat, currentUser]);

如果你的项目构建配置不支持可选链操作符?.，可以把空值判断改成普通写法：

if (!currentChat || !currentUser || !currentChat._id || !currentUser._id) {
  return;
}

如果存在快速切换会话的场景，可以加竞态标记，避免慢请求覆盖最新的会话消息：

useEffect(() =>{
    let isCanceled = false;
    async function fetchMsg(){
        if (!currentChat?._id || !currentUser?._id) return;
        const response = await axios.post(getAllMessagesRoute, {
            from: currentUser._id,
            to: currentChat._id,
        })
        // 只有当前effect是最新触发的，才更新消息状态
        if (!isCanceled) {
            setMessages(response.data);
        }
    }
    fetchMsg();
    return () => {
        // effect重新执行或者组件卸载时，标记作废旧请求的结果
        isCanceled = true;
    }
}, [currentChat, currentUser]);

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