React-bootstrap模式打开两次

Question

我试图在用户会话超时时打开一个模态。我正在使用redux-timeout来处理计时器并告诉我的模态何时打开，以便用户可以扩展那里的会话。 Redux-timeout似乎正常工作，我的模态确实打开了。问题是，当时间到期时，2个react-bootstrap模态会打开，我不明白为什么。

Session.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addTimeout, WATCH_ALL, removeTimeout } from 'redux-timeout';
import { Modal, Button } from 'react-bootstrap';
import { OPEN_SESSION_MODAL, CLOSE_SESSION_MODAL } from 
'redux/actions/sessionActions';
class Session extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {
    // Set time to 10 seconds for development
    this.props.addTimeout(10000, WATCH_ALL, this.modal.bind(this));
  }

  modal() {
    this.props.modal();
  }

  handleClick = (event) => {
    this.props.extend();
  }

  render() {
      return (
        <div>
          <Modal show={this.props.session.show}>
            This is the session modal
            <Button onClick={this.handleClick}>
              Extend the session
            </Button>
          </Modal>
        </div>
      );
  }
}
const mapStateToProps = (state) => {
    return state;
};

const mapDispatchToProps = (dispatch) => {
  return {
      addTimeout: (timeout, action, toDispatch) => {
          dispatch(addTimeout(timeout, action, toDispatch));
      },
      modal: () => {
          dispatch({ type: OPEN_SESSION_MODAL });
          dispatch(removeTimeout(WATCH_ALL));
      },
      extend: () => {
          dispatch({ type: CLOSE_SESSION_MODAL });
      },
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Session);

sessionActions.js

export const OPEN_SESSION_MODAL = 'OPEN_SESSION_MODAL';
export const CLOSE_SESSION_MODAL = 'CLOSE_SESSION_MODAL';
// Dispatched action to show the session modal
const closeSessionModal = () => {
  return {
    type: CLOSE_SESSION_MODAL,
  };
};

sessionReducer.js

import { OPEN_SESSION_MODAL, CLOSE_SESSION_MODAL } from 
'../actions/sessionActions';
export default (state = { show: false }, action) => {
    switch (action.type) {
    case OPEN_SESSION_MODAL:
        return { show: true };
    case CLOSE_SESSION_MODAL:
        return { show: false };
    default:
        return state;
    }
};