reactjs - 打开 React Modal 更改 MDBDataTable 的排序顺序

Question

我在我的 reactjs 项目中使用 MDBDataTableV5 数据表。当我点击查看按钮时，模式打开，它会自动更改我的表格行顺序。

我是 ReactJs 的新手，无法确定问题所在。可能是使用 setState 函数时出现此问题。

import React, { Component } from 'react';
import { Container, Row, Col, Card, CardBody, Button, Input, Modal, ModalBody, ModalFooter } from 'reactstrap';
import { activateAuthLayout } from '../../store/actions';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import { MDBDataTableV5 } from 'mdbreact';


class Discussion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalStandard: false,
    };
  }

  toggleModel(id) {
    this.setState({
      modalStandard: !this.state.modalStandard
    });

    this.removeBodyCss();
  }

  removeBodyCss() {
    document.body.classList.add('no_padding');
  }

  componentDidMount() {
    this.props.activateAuthLayout();
  }

  render() {

    const data = {
      columns: [
        {
          label: 'Id',
          field: 'id',
          width: 150
        },
        {
          label: 'Name',
          field: 'name',
          width: 150
        },
        {
          label: 'Agency',
          field: 'agency',
          width: 270
        },
        {
          label: 'Date',
          field: 'date',
          width: 200
        },
        {
          label: 'Action',
          field: 'action',
          width: 100,
        }
      ],
      rows: [
        {
          id: 22,
          name: 'Ashton Cox',
          agency: 'Cristiano Autoparts',
          date: '2020-05-12',
          action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
        },
        {
          id: 102,
          name: 'Tiger Nixon',
          agency: 'Astro Automobiles',
          date: '2020-03-12',
          action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
        },
        {
          id: 52,
          name: 'Garrett Winters',
          agency: 'DHCR Repair Service',
          date: '2018-03-05',
          action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
        }
      ]
    };

    return (
      <React.Fragment>
        <Container fluid>
          <div className="page-title-box">
            <Row className="align-items-center">
              <Col sm="6">
                <h4 className="page-title">Discussions</h4>
              </Col>
            </Row>
          </div>

          <Row>
            <Col>
              <Card>
                <CardBody>
                  <Row>
                    <Col sm="6">
                      <Input type="text" placeholder="Search by Agency" className="search-input-matrial" />
                    </Col>
                    <Col sm="6">
                      <Input type="text" placeholder="Search by Name" className="search-input-matrial" />
                    </Col>
                  </Row>
                </CardBody>
              </Card>
            </Col>
          </Row>

          <Row>
            <Col>
              <Card>
                <CardBody>
                  <MDBDataTableV5
                    responsive
                    striped
                    data={data}
                    searching={false}
                    onSort={value => console.log(value)}
                  />
                </CardBody>
              </Card>
            </Col>
          </Row>

          <Modal isOpen={this.state.modalStandard} toggle={() => this.toggleModel('discussionId')} >
            <div className="modal-header">
              <h5 className="modal-title mt-0" id="myModalLabel">Discussion</h5>
              <button type="button" onClick={() => this.setState({ modalStandard: false })} className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <ModalBody>
              <div className="chat-conversation">
                Body text
              </div>

            </ModalBody>
            <ModalFooter>
              <Button type="button" color="secondary" onClick={() => this.toggleModel('discussionId')} className="waves-effect">Close</Button>
              <Button type="button" color="primary" className="waves-effect waves-light">Save changes</Button>
            </ModalFooter>
          </Modal>

        </Container>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(null, { activateAuthLayout })(Discussion));

Answer 1

问题是您的 Modal 和 MDBDatatable 是 sibling ，而 Modal 正在更新父状态，这会导致这两个组件重新呈现。

请参阅this related question了解处理此问题的方法。