如何从React表中的状态渲染数据?

时间:2018-11-27 06:02:54

标签: reactjs react-table

我目前正在使用React Table构建一个表来输入我的数据。正在从服务器推送数据,并在状态上对其进行更新。 状态“名称”是由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>
    );
  }
}

1 个答案:

答案 0 :(得分:0)

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