React中如何遍历WebSocket返回的对象并在页面渲染对应值

问题原因&解决步骤 #

• 状态初始值类型不匹配
  你当前给object状态的初始值是空字符串""，Object.keys("")执行后返回空数组，首次渲染时自然没有内容输出。你需要将初始值修改为和接收数据结构一致的空对象：

const [object, setObject] = useState({}); 

• WebSocket逻辑位置错误
  直接在组件顶层创建WebSocket实例、绑定事件会导致组件每次重渲染时重复创建连接、重复绑定事件，轻则消息接收异常，重则引发内存泄漏。你需要把这部分逻辑封装到useEffect钩子中，同时添加销毁逻辑：

useEffect(() => {
  const client = new W3CWebSocket("ws://ABCD:9080/user");
  client.onopen = () => {
    console.log("Connected");
  };
  client.onmessage = (e) => {
    const newObj = JSON.parse(e.data); 
    // 加一层校验，避免后端返回结构异常
    if(newObj && typeof newObj.data === 'object' && !Array.isArray(newObj.data)){
      setObject(newObj.data);
    }
  };
  // 组件卸载时关闭连接，避免内存泄漏
  return () => {
    client.close();
  }
}, []); // 空依赖保证只在组件首次挂载时执行一次

• 渲染前增加判空和兼容逻辑
  如果要避免异常结构导致的渲染报错，可以在遍历前先判断object是否为有效对象，同时兼容嵌套对象的渲染场景：

return (
  <div className="App">
    <Navbar />
    {object && typeof object === 'object' && Object.keys(object).length > 0 ? (
      Object.keys(object).map((objKey) => (
        <div key={objKey}> {/* 用objKey当key比index更合理，避免重排异常 */}
          <p> {objKey} : {
            // 如果属性值是嵌套对象，转成字符串再渲染，否则React会报错
            typeof object[objKey] === 'object' ? JSON.stringify(object[objKey]) : object[objKey]
          }</p>
        </div>
      ))
    ) : (
      <p>暂无数据</p> // 无数据时的兜底展示
    )}
    <DataTable object = { object } />
  </div>
);

如果修改后还是没有数据，可以先在onmessage回调中打印newObj.data，确认后端返回的结构是否符合预期、是否确实返回了非空的对象格式数据。

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