如何从 React 表中的状态呈现数据？答案

【问题标题】：How to render data from state in React table?如何从 React 表中的状态呈现数据？
【发布时间】：2018-11-27 06:02:54
【问题描述】：

我目前正在使用 React Table 构建一个表格来输入我的数据。数据正在从服务器推送，并正在更新状态。状态“Names”是一个包含 2 个键、数字和名称的哈希数组。

但是，该表没有更新任何数据。

任何帮助将不胜感激。

class Table extends Component {
  state = {
    names: []
  };

  connectSocket = () => {
    const socketURL = 'http://localhost:3001/';
    const socket = io(socketURL);
    socket.on('connect', () => {
      console.log('connected socket server');
    });
    socket.io.on('connect_error', () => {
      console.log('Error connecting to server');
    });
    socket.on('updates', (data) => {
      this.setState(
        {
          names: data
        },
        () => {
          // console.log(this.state.names);
        }
      );
    });
  };

  componentDidMount() {
    this.connectSocket();
  }

  render() {
    const columns = [
      {
        Header: 'ID',
        accesor: 'number',
        sortable: false
      },
      {
        Header: 'Number',
        accesor: 'number',
        sortable: true
      },
      {
        Header: 'Name',
        accesor: 'name',
        sortable: false
      }
    ];
    return (
      <div>
        <ReactTable
          columns={columns}
          data={this.state.names}
          noDataText={'Loading...'}
        />
      </div>
    );
  }
}

【问题讨论】：

控制台打印什么？
控制台正在打印 [{number:0, name:'String'}] 并且数组会随着它添加新的哈希值而不断增加
您的问题出在初始数据上，还是与后续更新有关？
您的套接字是仅发送更新还是每次更改时发送完整数据？
问题在于初始数据。套接字每隔 1 秒发送一次数据

标签： reactjs react-table

【解决方案1】：

列定义错误。将访问者更改为访问者

【讨论】：