如何在 React JS 中收到来自 Web 套接字的通知时重新呈现表组件? [英] How to re render table component upon receiving a notification from web socket in React JS?

问题描述

我正在使用 React 表并加载一个页面，该页面显示一个包含从 API 获取的数据的表.我也在监听网络套接字，现在，每当通过网络套接字发送某些东西时，我都会打印一条控制台消息.现在，当我收到有关 Web 套接字的任何更新时，我想重新加载表(依次进行 API 调用).

Im using React table and loading a page which displays a table with data fetched from an API. Im also listening on a web socket and right now, whenever something is sent over a web socket, Im printing a console message. Now I want to reload the table(in turn making the API call) when I receive any update on the web socket.

    class TableExp extends React.Component {
    constructor() {
    super();

this.state = {
  tableData: [
    {
      resourceID: '',
      resourceType: '',
      tenantName: '',
      dealerID: '',
      status: '',
      logFilePath: '',
      supportPerson: '',
      lastUpdatedTime: '',
    },
  ],
  //testMessage: [{ message: 'Initial Message' }],
};
}

    componentDidMount() {
this.websocket = new WebSocket(socket);

this.websocket.onopen = () => {
  axios.get('https://myapi.com', {
    headers: {},
    responseType: 'json',
  })
  .then((response) => {
    this.setState({ tableData: response.data });
  });
  console.log('Socket Opened');
};

this.websocket.onmessage = (event) => {
    const data = (JSON.parse(event.data));
    const status = data.status;
    console.log(data.status);
    this.forceUpdate();

  if (status === 'failed') {
      console.log('Error message received');
      this.reloadTable();
    }
};

this.websocket.onclose = () => {
  this.statusDispatcher('closed');
};
}

 reloadTable() {
  this.forceUpdate();
}

render() {
  const { tableData } = this.state;

return (
  <ReactTable
      data={tableData}
      noDataText="Loading.."
      columns={[
        {
          columns: [
            {
              Header: 'Dealer ID',
              accessor: 'dealerId',
              id: "dealerId",
            },
            {
              Header: 'Location',
              id: "dealerId",
            },
          {
          columns: [
            {
              filterable: false,
              Header: 'File Path',
              accessor: 'logFilePath',
            },
             {
              filterable: false,
              Header: 'Date',
              accessor: 'Date',
            },
          ],
        },
      ]}
      defaultPageSize={20}
      style={{
        height: '450px', // This will force the table body to overflow and scroll, since there is not enough room
      }}
      className="-striped -highlight"
  />
);
}

推荐答案

你可以在 onmessage

this.websocket.onmessage = (event) => {
  let data = [];
  const status = data.status;

  if (status === 'failed') {
    console.log('Error message received');
    // And do nothing, or empty table
  } else {
    data = JSON.parse(event.data);
  }
  
  this.setState({ tableData: data });
};

这篇关于如何在 React JS 中收到来自 Web 套接字的通知时重新呈现表组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！