React聊天客户端点击聊天后chatID未定义问题求助

问题根源 #

1. seeChat函数赋值错误：调用/api/message/${userID}获取的是消息列表数组，数组本身没有_id属性，setChatID(data._id)会把chatID设为undefined。正确的聊天ID应为传入的userID（即目标聊天的_id）。
2. accessChat未设置chatID：创建新聊天后未立即赋值chatID，导致新建聊天后直接发消息时chatID为空。
3. sendMessage错误覆盖chatID：发送消息后把返回的消息ID赋值给chatID，会覆盖当前聊天ID，导致后续消息无法发送到正确窗口。

修复代码 #

1. 修正seeChat函数 #

将setChatID(data._id)改为setChatID(userID)，直接使用传入的聊天ID：

const seeChat = async (userID) => {
    try {
        let user = localStorage.getItem('userInfo');
        user = JSON.parse(user)
        let Token = user.token

        const config = {
            headers: {
                Authorization: `Bearer ${Token}`,
                'Cache-Control': 'no-cache',
                Pragma: 'no-cache',
                Expires: '0',
            },
        };
        
        const { data } = await axios.get(`/api/message/${userID}`, config);
        console.log(data);
        setChatMessages(data);
        setHasLoaded(true);
        setChatID(userID); // 改为传入的聊天ID
    } catch (error) {
        console.log(error);
    }
}

2. 完善accessChat函数 #

创建新聊天后立即设置chatID并加载对应消息：

const accessChat = async (userId) => {
    try {
        let user = localStorage.getItem('userInfo');
        user = JSON.parse(user)
        let Token = user.token
        const config = {
            headers: {
                "Content-type": "application/json",
                Authorization: `Bearer ${Token}`,
                'Cache-Control': 'no-cache',
                Pragma: 'no-cache',
                Expires: '0',
            },
        };

        const { data } = await axios.post('/api/chat', { userId }, config);
        console.log(data);

        const existingChat = chats.find(chat => chat._id === data._id);
        if (!existingChat) {
            setChats(prevChats => [...prevChats, data]);
        }
        setSearchResult([]); 
        setHasLoaded(true);
        setChatID(data._id); // 设置新创建的聊天ID
        // 加载该聊天的消息
        const messageRes = await axios.get(`/api/message/${data._id}`, config);
        setChatMessages(messageRes.data);
    } catch (error) {
        console.error('Error accessing chat:', error.response ? error.response.data : error.message);
    }
}

3. 修正sendMessage函数 #

移除错误的setChatID(data._id)，增加聊天选择校验：

const sendMessage = async () => {
    try {
        if (!chatID) { // 避免无聊天时发送
            alert('请先选择一个聊天');
            return;
        }
        let user = localStorage.getItem('userInfo');
        user = JSON.parse(user)
        let Token = user.token
        const config = {
            headers: {
                "Content-type": "application/json",
                Authorization: `Bearer ${Token}`,
                'Cache-Control': 'no-cache',
                Pragma: 'no-cache',
                Expires: '0',
            },
        };

        const body = {
            "content": message,
            "chatId": chatID
        };

        console.log("Sending message:", body);

        const { data } = await axios.post('/api/message', body, config);
        console.log(data);
        setChatMessages(prev => [...prev, data]); // 更新消息列表
        setMessage(''); // 清空输入框
    } catch (error) {
        console.log(error);
    }
}

4. 可选：初始化chatID为null #

避免初始值为undefined，优化状态初始化：

const [chatID, setChatID] = useState(null);

额外建议 #

• 将重复的获取token、生成config的逻辑抽成公共函数，减少代码冗余。
• 给发送按钮增加禁用逻辑：当!chatID或!message时按钮不可点击，避免无效操作。

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