React and table does not sync

Question

I'm using react antd table with pagination,sort & etc. it'll fetch data when component is loaded. when te user clicks on pagination it should call Api and get new data accordingly. it's getting bada but the table won't update with new data.

I'm new with react. please help me with this,

import PropTypes from 'prop-types';
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from 'redux';
import { Row, Col } from "antd";
import clone from "clone";
import Button from "../../components/uielements/button";
import PageHeader from "../../components/utility/pageHeader";
import Box from "../../components/utility/box";
import LayoutWrapper from "../../components/utility/layoutWrapper";
import SignUpForm from "../../components/vendorSignup";
import basicStyle from "../../settings/basicStyle";
import actions from "../../redux/vendorSignUp/actions";
import { createColumns } from "./config";
import { ButtonWrapper } from "../../components/card/cardModal.style";
import SimpleTable from "./antTables/tableViews/sortView";
import ContentHolder from '../../components/utility/contentHolder';
import Spin from '../Feedback/Spin/spin.style';

const { addVendor, getVendors } = actions;
class Cards extends Component {

  static propTypes = {
    dispatch: PropTypes.func
  };

  constructor(props) {
    super(props);
    this.addColumn = this.addColumn.bind(this);
    this.editColumn = this.editColumn.bind(this);
    this.handleCancel = this.handleCancel.bind(this);
    this.submitCard = this.submitCard.bind(this);
    this.updateCard = this.updateCard.bind(this);
    this.tableInfo = {
      title: "Sort Table",
      value: "sortView",
      columns: []
    };
    this.tableInfo.columns = createColumns(this.editColumn);
    this.state = {
      editView: false,
      selectedCard: null,
      modalType: ""
    };
  }

  componentWillMount() {
    const { getVendors } = this.props.actions;
  }

  render() {

    const style = {
      textAlign: 'center',
      background: '#f1f3f6',
      padding: '30px 50px'
    };

    const { rowStyle, colStyle, gutter } = basicStyle;
    const { editView, selectedCard, modalType } = this.state;

    const vendorSignUp = clone(this.props.vendorSignUp);

    if (vendorSignUp.length == 0) {
      return (<LayoutWrapper>
        <PageHeader>Vendors</PageHeader>
        <ContentHolder>
          <div style={style}>
            <Spin spinning={vendorSignUp.length === 0} />
          </div>
        </ContentHolder>
      </LayoutWrapper>);
    }
    return (
      <LayoutWrapper>
        <PageHeader>Vendors</PageHeader>
        <Row style={rowStyle} gutter={gutter} justify="start">
          <Col md={24} sm={24} xs={24} style={colStyle}>
            <Box>
              <ButtonWrapper className="isoButtonWrapper">
                <Button type="primary" className="" onClick={this.addColumn}>
                  Add New Vendor
                </Button>
              </ButtonWrapper>

              <SimpleTable columns={this.tableInfo.columns} dataSource={vendorSignUp} loading={this.loading} onChange={this.onChange} />
              {selectedCard ? (
                <SignUpForm
                  saveFormRef={this.saveFormRef}
                  editView={editView}
                  modalType={modalType}
                  onCancel={this.handleCancel}
                  onCreate={this.submitCard}
                  onOk={this.submitCard}
                  wrappedComponentRef={this.saveFormRef}
                />
              ) : ("")}
            </Box>
          </Col>
        </Row>
      </LayoutWrapper>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.vendorSignUp.toJS()
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
      getVendors, addVendor
    }, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Cards);

Here is my table view;

import React, { Component } from 'react';
import { connect } from 'react-redux';
import TableWrapper from '../antTable.style';
import actions from "../../../../redux/vendorSignUp/actions";

const { getVendors } = actions;

class SignIn extends Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
      dataList: this.props.dataSource || this.props.dataList.getAll()
    };
    this.columns = this.props.columns || this.props.tableInfo.columns;
  }
  onChange(pagination, filters, sorter) {

    if (sorter.order) {
      if (sorter.order == "ascend") {

        const { getVendors } = this.props;
        this.setState({
          loading: true,
        });
        getVendors('3-5');

      }
      else {
        this.props.dataSource.sort(function (a, b) {
          var x = a[sorter.field].toLowerCase();
          var y = b[sorter.field].toLowerCase();
          if (y < x) { return -1; }
          if (y > x) { return 1; }
          return 0;
        });
      }
    }
  }
  render() {
    return (
      <TableWrapper
        columns={this.columns}
        onChange={this.onChange}
        dataSource={this.state.dataList}
        className="isoSortingTable"
        pagination={{ pageSize: 10 }}
        loading={this.state.loading}
      />
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state
  };
}

export default connect(mapStateToProps,
  { getVendors }
)(SignIn);

Answer 1

problem was in the constructor.it's will be executed only one time. therefore this.state.datalist will be the same. that's why it did not work.