Как многократно обновлять React Component данными, поступающими с сервера?

Question

У меня есть данные, которые продолжают поступать с сервера на клиент, через WebSockets:

Client Code in Console:

const
    io = require("socket.io-client"),
    address = "http://localhost:8000" ,
    ioClient = io.connect(address);

console.log(`Connected to address ${address}`);

ioClient.on("employeedetails", (msg) => {
    var parsed = JSON.parse(msg);
    console.log('')
    console.log('employeeId : ' + parsed.employeeId);    
    console.log('departmentId : ' + parsed.departmentId);
});

Теперь я хочу показать его в компоненте React (а не в окне консоли), который будет обновляться каждый раз что событие запускается, поэтому я создал компонент, который будет получать данные и помещать их в Typography:

import Typography from "@material-ui/core/Typography";


export default class ServerResponses extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={classes.root}>
        <Typography variant="body2" gutterBottom>
          {props.serverResponse}
        </Typography>
      </div>
    );
  }
}

и используйте его в App.js

class App extends React.Component {
      render() {   
            return (  
                  <div>
                      <ServerResponses ... {probably pass smth here later ...} />
                  </div>  
            );
}

Как я могу перерисовать ServerResponses Component с новыми данными и сохранить старые данные с сервера, всякий раз, когда происходит событие (ioClient.on)?

Answer 1

Вы должны привязать свой обратный вызов сокета к средству обновления состояния:

ioClient.on("employeedetails", (msg) => {
    setState({msg})
})