React核心应用实现多Kubernetes Pods资源监控的Socket连接方案问询

看起来你遇到的核心问题是所有StatsCPUComp实例都共享同一个硬编码的ENDPOINT，导致它们都连接到同一个Socket服务器，从而数据串了。要实现每个组件对应不同的端点，我们只需要把端点配置从组件内部移到外部，通过props传递给每个组件实例即可。

步骤1：修改StatsCPUComp组件，支持通过props接收端点 #

把原来固定的ENDPOINT改成组件的props参数，同时更新useEffect的依赖数组，确保端点变化时重新建立连接：

// StatsCPUComp组件
import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
import {StatsCPUWrapper} from './statsCPU.style'

// 现在组件接收endpoint作为props，默认值保留原来的环境变量
function StatsCPUComp({ endpoint = process.env.STATS_ENDPOINT || "http://127.0.0.1:4001" }) {
  const [cpustats, setCPUstats] = useState("");

  useEffect(() => {
    // 针对当前端点创建新的socket连接
    const socket = socketIOClient(endpoint);
    socket.on("FromAPI", data => {
      setCPUstats(data);
    });

    // 组件卸载或端点变化时，断开当前socket连接
    return () => socket.disconnect();
  }, [endpoint]); // 把endpoint加入依赖数组，确保端点变化时重新执行effect

  return (
    <StatsCPUWrapper>
      <p> It's <time dateTime={cpustats}>{cpustats}</time> </p>
    </StatsCPUWrapper>
  );
}

export default StatsCPUComp;

步骤2：在ProjectComp中为每个StatsCPUComp传入对应项目的端点 #

假设你的redux中每个project对象都包含了对应的stats端点信息（比如statsEndpoint字段，如果没有的话，需要先从后端获取项目列表时把每个项目的端点信息一起返回并存入redux），然后在渲染时把这个端点传给StatsCPUComp：

// ProjectComp组件
import React from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {Link} from 'react-router-dom'
import PropTypes from 'prop-types'
import {create, remove} from '../../features/projects/projectSlice'
import {ProjectWrapper} from './project.style'
import StatsCPUComp from './stats/statsCPU'

export function ProjectComp() {
  const dispatch = useDispatch()
  const projects = useSelector((state) => state.projects)

  const handleSubmit = (e) => {
    e.preventDefault()
  }
  const handleAction = (e) => {
    e.preventDefault()
  }

  return (
    <ProjectWrapper>
      <div className="projects">
        <div className="row">
          {projects.map((project) => ( // 变量名改成project，避免和数组名重复，更规范
            <div className="col-12" key={project.id}> {/* 记得加key属性，React列表渲染要求 */}
              <div className="card project-card"> {/* 这里class改成className，符合React规范 */}
                <div className="card-body">
                  <div className="row">
                    <div className="col-4 project-text">
                      <h5 className="card-title"> {' '} <Link to={`/projects/${project.id}`}>{project.name}</Link> </h5>
                      <p className="card-text">Owner: {project.owner}</p>
                      <p className="card-text">{project.email}</p>
                    </div>
                    <div className="col-4 projects-stats">
                      {/* 传入当前项目对应的stats端点 */}
                      <StatsCPUComp endpoint={project.statsEndpoint} />
                    </div>
                    <div className="col-4 projects-stats"></div>
                    <div className="col-4 projects-stats"></div>
                  </div>
                </div>
              </div>
              <br></br>
            </div>
          ))}
        </div>
      </div>
    </ProjectWrapper>
  )
}

关键修改点说明 #

1. 组件复用性提升：把端点从组件内部硬编码改为props传入，让StatsCPUComp变成通用组件，每个实例可以独立配置连接地址。
2. 依赖数组更新：将endpoint加入useEffect的依赖数组，这样当端点变化时，React会自动销毁旧的socket连接，创建新的连接到新端点，避免旧连接继续发送数据导致显示异常。
3. React规范修复：顺便修正了代码中的小问题，比如列表渲染的key属性、class改成className、变量名重复的问题，这些都是React开发中的最佳实践。

额外注意事项 #

• 确保你的redux中每个project对象都包含statsEndpoint字段，如果没有的话，需要调整后端接口，让返回的项目列表包含每个项目对应的stats服务端点地址，然后在redux中存储这些信息。
• 如果需要默认的 fallback 端点，可以保留组件props的默认值，这样当某个项目没有配置端点时，会使用环境变量中的默认地址。

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