React中componentDidUpdate的prevState失效，组件状态不更新求助

当状态getusersmsgcount发生变化时，如何更新组件？目前存在的问题是：不手动刷新页面的话，状态不会改变，且this.state与prevState始终相同。如果在componentDidUpdate中不判断prevState就调用this.updateCount()，会陷入无限循环。

用户代码 #

this.state = {
    getusersmsgcount: 0,
};

componentDidMount() {
        this.updateCount();
}

componentDidUpdate(prevProps, prevState) {
        const prevuseritem = prevState.getusersmsgcount;
        const currentuseritem = this.state.getusersmsgcount;
        console.log("Previous user item = ", prevuseritem, "Current user item = ", currentuseritem)
        if(prevuseritem !== currentuseritem) {
            this.updateCount();
        }
    }
    
    updateCount = () => {
        CometChat.getUnreadMessageCount().then((counter) => {
            const summsgs = Object.values(counter.users);
            const usersmsgcount = summsgs.reduce((partialSum, a) => partialSum + a, 0);
            return this.setState((prevState) => ({
                ...prevState, 
                getusersmsgcount: usersmsgcount,
            }));
        })
    }

核心问题是没有监听CometChat的未读消息变化事件，仅靠组件生命周期的被动触发无法实时更新状态，且当前componentDidUpdate的逻辑完全错误。

修正步骤： #

1. 注册CometChat未读消息监听
   在组件挂载时添加事件监听，当未读消息数变化时自动更新状态：

   componentDidMount() {
       // 初始化获取一次未读消息数
       this.updateCount();
       // 注册未读消息变化监听
       CometChat.addListener(
           "UNREAD_MESSAGE_COUNT_LISTENER",
           new CometChat.UnreadMessageCountListener({
               onUnreadMessageCountChanged: (count) => {
                   const summsgs = Object.values(count.users);
                   const usersmsgcount = summsgs.reduce((partialSum, a) => partialSum + a, 0);
                   this.setState({ getusersmsgcount: usersmsgcount });
               }
           })
       );
   }
   

2. 移除无效的componentDidUpdate逻辑
   不需要在componentDidUpdate中调用updateCount，事件监听会自动触发状态更新，组件会随之重新渲染。

3. 组件卸载时清理监听
   避免内存泄漏，在组件销毁时移除监听：

   componentWillUnmount() {
       CometChat.removeListener("UNREAD_MESSAGE_COUNT_LISTENER");
   }
   

问题根源解析： #

• 原代码仅在组件挂载时获取一次未读消息数，之后没有任何主动更新机制，所以状态不会自动变化。
• componentDidUpdate的逻辑是“状态变化时再获取数据”，但没有外部触发的话状态根本不会变，完全无法触发更新；若误触发还会因setState再次触发componentDidUpdate导致无限循环。

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