React.js + Socket.io 更新状态改变列表项的位置

Question

export default class extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            status: [],
            services: []
        }

        getAppData((err,opt, data) => {
            function Exists(list, id) {
                return list.some(function(el) {
                  return el.data.id == id;
                }); 
            }
            if (opt == "sysinfo"){
                var filtered = this.state.status;

                if (Exists(filtered, data.id)){
                    filtered = this.state.status.filter(function(el) { return el.data.id != data.id; }); 
                }
                
                filtered.push({ data })
                this.setState({status: filtered})
            } else if (opt == "init_services"){
                this.setState({services: data})
            }
            
        });
    }
    
    render() {
        

        const timestampforuse = this.state.status
        const totalList = this.state.services
        console.log(totalList)
        const mainList = totalList.map((link) =>
            <ListGroup.Item  key={link.id} keyProp={link.id}>Name: {link.name} Node: {link.node}</ListGroup.Item> 
        );
        console.log(totalList)
        const listItems = timestampforuse.map((link) =>
            <ListGroup.Item ><p key={link.data.id}>ID: {link.data.pid} Node: {link.data.node} <br/>Ram usage: {link.data.p_ram.toFixed(2)} / 100% Cpu usage: {link.data.p_cpu.toFixed(2)} / 100%</p></ListGroup.Item> 
        );

        return (
                <div>
                    <ListGroup>
                        {mainList}
                    </ListGroup>
                </div>
        );
    }
}

来自 sysinfo 的数据：

{
            cores: 16,
            cpu: 0,
            id: "00ffab6ca93243f08eb10670d9c491d54cf674173d13c24a0a663ebb3f5e54d042ae",
            node: "1",
            p_cpu: 0,
            p_ram: 0.18230482881430612,
            pid: 29216,
            ram: 28.78515625,
            threads: 5,
            time: 1609179904302,
            time_from_startup: 1609179876.271594,
            time_since_boot: 1608562209.0201786
        }

初始化数据：

add_game: true
description: "a test script"
id: "00ffab6ca93243f08eb10670d9c491d54a0a663ebb3f5e54d042ae"
name: "test331112321"
node: "1"

套接字脚本：

import openSocket from 'socket.io-client';
const  socket = openSocket('http://localhost:3000');

function getAppData(cb) {
    socket.on('update_system', data => cb(null,"sysinfo", data));
    socket.on('init_services', data => cb(null,"init_services", data));
    socket.emit('updated', 1000);
}

export { getAppData };

我尝试过使用地图并将其用作列表，但是当它每秒更新一次时，它更新得太快以至于无法阅读。我将如何使名称出现，然后一旦发送数据就更新列表但不更新整个列表？目前，它允许它更新和更改，如果它是 1 个正在更新的项目没有问题，但如果有 2 个或更多它更新太快而无法看到。我该如何解决这个问题？

Answer 1

我已通过更新服务器端的对象数组来解决此问题。更新该列表上的服务并返回整个列表。这解决了更新太快的问题。

结束码前端码：

export default class extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            services: []
        }
        
        getAppData((err,opt, data) => {
            if (opt == "sysinfo"){
                this.setState({services: data})
            }
        });
    }
    
    componentDidMount() {
        fetch("http://localhost:3000/api/v1/bot/me/getservices").then(res => res.json()).then(data =>{
            console.log(data)
            this.setState({services: data})
        })
        
    }
    render() {
        const totalList = this.state.services

        const listItems = totalList.map((link) =>
            <ListGroup.Item key={link.id}>Name: {link.name} Node: {link.node} <br/>Ram usage: {link.p_ram.toFixed(2)} / 100% Cpu usage: {link.p_cpu.toFixed(2)} / 100%</ListGroup.Item> 
        );

        return (
                <div>
                    <ListGroup>
                        {listItems}
                    </ListGroup>
                </div>
        );
    }
}