React组件数组对象属性变更时未重新渲染的解决方法

1. 先修复逻辑判断的致命错误 #

你的Users组件里的在线状态判断写了语法错误，导致不管user.state实际是什么值，都会显示"Online"，这会让你误以为组件没重新渲染：

// 错误写法：'registered'是字符串常量，永远为true，条件永远成立
user.state === 'REGISTERED' || 'registered'

// 正确写法：需要分别判断两个值
user.state === 'REGISTERED' || user.state === 'registered'

2. 确保状态更新时的引用变化 #

虽然你提到尝试过创建新数组，但再确认WebSocket回调里的处理逻辑，保证每次更新的数组和对象都是新引用（React依赖浅比较判断是否更新状态）：

// homepage.js 中WebSocket回调部分修改
case 'updateListUser':
  // 解构数组生成新引用，同时对每个用户对象做浅拷贝，确保对象引用也更新
  const newUsers = parsedMessage.users.map(user => ({ ...user }));
  setUsers(newUsers);
break;

3. 补全WebSocket的生命周期处理 #

避免组件卸载后WebSocket仍在运行导致内存泄漏，同时确保连接只初始化一次：

useEffect(() => {
  async function init() {
    await connWS();
  }
  init();

  // 组件卸载时关闭WebSocket连接
  return () => {
    if (typeof ws !== 'undefined') {
      ws.close();
    }
  };
}, []);

4. 验证组件是否接收到新数据 #

可以在Users组件里加一段监听代码，确认是否收到更新后的props：

import { useEffect } from 'react';

const Users = ({data}) => {
  useEffect(() => {
    console.log('用户数据已更新:', data);
  }, [data]);

  // 其余组件代码...
};

修复后的Users组件关键代码片段 #

{user.state ? (
  user.state === 'REGISTERED' || user.state === 'registered' ? (
    <p style={{ color: `#13c2c2` }}>Online</p>
  ) : (
    <p style={{ color: `#f5222d` }}>Offline</p>
  )
) : (
  <p style={{ color: `#f5222d` }}>Offline</p>
)}

先解决逻辑判断的问题，这大概率是你误以为组件没更新的核心原因，再配合引用更新的处理，就能实现用户状态的实时渲染了。

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