reactjs - 反应和表不同步

Question

我正在使用带有分页，排序等的 react antd 表。它会在加载组件时获取数据。当用户点击分页时，它应该调用 Api 并相应地获取新数据。它越来越糟糕，但表不会用新数据更新。

我是新来的反应。请在这件事上给予我帮助，

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);

这是我的表格视图；

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

问题出在构造函数中。它只会执行一次。因此 this.state.datalist 将是相同的。这就是为什么它不起作用。