反应模式没有关闭 onClick

Question

我有多个components 的列表，每个Modal 在点击事件时打开一个Modal。我将方法onHide 传递给每个Modal，一旦单击关闭按钮就应该关闭模式，但没有任何反应。

我记录了点击并注册了点击，但是在Seances.js 中调用modalClose 时状态没有改变。我做错了什么？

Seances.js

class Seances extends Component {
  constructor(props) {
    super(props);
      this.state = {
        modalShow: false
      };
    }

  render() {
    const seances = this.props.seances;
    const handleDeleteUser = this.props.handleDeleteUser;
    let modalClose = () => this.setState({ modalShow: false });

    return (
      <Fragment>
        {seances && seances.length > 0 ? (
          seances.map(({devices, interval, startDate, endDate, status}, index) => (
            <div className="card" style={{marginBottom: '7px', width: '100%'}} key={index} onClick={() => this.setState({ modalShow: true })}>
              <div className="card-body">
                <h5 className="card-title">Seansi nr: {index}</h5>
                <p className="card-text">Seadmed: {devices}</p>
                <p className="card-text">Algus aeg: {startDate}</p>
                <p className="card-text">Lõpp aeg: {endDate}</p>
                <p className="card-text">Intervall: {interval}</p>
                <p className="card-text">Staatus: {status}</p>
                <button
                  type="button"
                  className="close float-right"
                  aria-label="Close"
                  onClick={() => handleDeleteUser(index)}
                >
                  <span aria-hidden="true">×</span>
                </button>
                <ResultModal
                  id={1}
                  show={this.state.modalShow}
                  onHide={modalClose}
                />
              </div>
            </div>
          ))
        ) : (
            <div>
              <p>Aktiivsed seansid puuduvad</p>
            </div>
          )}
        </Fragment>
      );
   }
}

Seances.propTypes = {
  handleDeleteUser: PropTypes.func.isRequired,
  seances: PropTypes.arrayOf(
    PropTypes.shape({
      devices: PropTypes.string.isRequired,
      interval: PropTypes.string.isRequired,
      startDate: PropTypes.string.isRequired,
      endDate: PropTypes.string.isRequired,
      status: PropTypes.string.isRequired
    })
  )
};

export default Seances;

ResultModal.js

class ResultModal extends React.Component {
  changeHandler = event => {
    this.setState({ [event.target.devices]: event.target.value });
  };

  getPickerValue = (value) => {
    console.log(value);
  }

  render() {
    return (
      <Modal
        show={this.props.show} onHide={this.props.onHide}
        size="lg"
        aria-labelledby="contained-modal-title-vcenter"
        centered
      >
        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Seance nr: 1
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div>
            <form>
              {/*First row*/}
              <MDBRow>
                <MDBCol md="4">
                  <h4 id="section1"><strong>Result</strong></h4>
                  <p>Integer eleifend massa nec sem rhoncus tristique. Mauris pulvinar justo vitae
                     nisi pretium tincidunt. Nulla dolor nibh, porta ut fringilla vel, maximus at mauris.
                     Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut aliquam
                     malesuada turpis eu luctus. In eget sapien quis urna cursus tempus.
                     In eu placerat elit, ut tristique justo</p>
                </MDBCol>
              </MDBRow>
              <Button variant="secondary" onClick={this.props.onHide}>
                Close
              </Button>
              <MDBBtn color="success" type="submit" className="float-right">
                Convert to File
              </MDBBtn>
            </form>
          </div>
        </Modal.Body>
      </Modal>
    );
  }
}

ResultModal.propTypes = {
  onHide: PropTypes.func.isRequired,
  show: PropTypes.bool.isRequired
};

export default ResultModal;

Answer 1

你不应该在渲染方法中调用这段代码：

let modalClose = () => this.setState({ modalShow: false });

这里有一个doc 说：

渲染

在此处调用 setState 会使您的组件成为产生无限循环的竞争者。 render 应该保持纯净，并用于根据状态或道具有条件地在 JSX 片段/子组件之间切换。渲染中的回调可用于更新状态，然后根据更改重新渲染。

相反，您必须通过 handleDeleteUser 更改您的 modalShow，例如，或单击您的按钮关闭。

...
handleDeleteUser (e) {
   ...
   ...
   this.setState({ modalShow: false });
}
...