React.js + Socket.io 更新 state 更改列表项的 position

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>
        );
    }
}

Data from 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
        }

Data for init:

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

Socket script:

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 };

I have tried using a map and using it as a list but when it updates every second it updates too fast to even read. How would I make the name appear, then once data gets sent have that update the list but not update the entire list? At the moment, it allows it to update and change, and no issues if it's 1 item being updated but if there are 2 or more it updates too fast to see. How do I get around this?

Answer 1

I have fixed this by updating an array of objects on the server-side. Updating a service on that list and returning the entire list. This tackled the issue of having it update too fast.

End code front end code:

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>
        );
    }
}