Обновление модального компонента после отправки комментария

Question

Я использую комбо из React Big Calendar и Resal-Strap Modal . Когда пользователь нажимает на событие даты в календаре, открывается модальное окно с формой комментария.

---

Выпуск

Моя проблема в том, что когда я публикую комментарий при отправке, календарь в фоновом режиме перезагружается с новым событием даты с новым комментарием ПЛЮС с исходным событием даты , поэтому у меня есть два события даты один без новых комментариев, а другой с новым комментарием, который я только что опубликовал.

---

Ожидаемый результат

Лента комментариев внутри модального окна должна обновляться новым комментарием, а не компонентом календаря.

---

Я вставил код моего редуктора и действий ниже. Должен ли я работать над редуктором, как большинство вопросов, которые я читал, или обновлять компонент MODAL или созданный мной commentFeedComment - это форма.

Я намеренно пропустил свой код импорта и функции handleChange или Submit, поскольку они не являются проблемой, это переменная comment , в которой хранятся данные содержимого, которые получают только из redux

---

когда пользователь нажимает на событие даты в календаре, заполняющее модальное время. Теперь, когда используются комментарии, переменная комментария не обновляется, так как пользователь не нажал на событие даты

Редуктор

case CREATE_COMMENT:
  return {
    ...state,
    content: [action.payload, ...state.content],
    loading: false
  };

Действия

export const addComment = (id, commentData) => dispatch => {
  dispatch(clearErrors());
  axios
    .post(`/api/calendar/id/${id}/comment`, commentData)
    .then(res =>
      dispatch({
        type: CREATE_COMMENT,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

Компонент календаря

class Calendar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false,
      commentData: [],
      title: '',
      contentCopy: '',
      start: null,
      _id: ''
    };
    this.toggle = this.toggle.bind(this);
  }

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

  toggle = e => {
    this.setState({
      modal: !this.state.modal,
      _id: e._id,
      title: e.title,
      contentCopy: e.contentCopy,
      start: e.start,
      commentData: e.commentData
    });
  };

  render() {
    const { content, loading } = this.props.content;
    let commentsVariable;
    let PostDate = [];

    if (content == null || loading) {
      PostDate = [];
    } else {
      if (content.length > 0) {
        PostDate = content.map(x => ({
          start: x.dateGoingLive,
          end: x.dateGoingLive,
          title: x.clientName,
          contentCopy: x.contentCopy,
          _id: x._id,
          commentData: x.comments
        }));
      } else {
        PostDate = [];
      }
    }


    if (this.state.commentData == null || this.state.commentData == undefined) {
      commentsVariable = this.state.commentData;
    } else {
      commentsVariable = this.state.commentData.map( x => (
          <div className="mb-3" key={x._id}>
              <p>{x.comment}</p>
          </div>
        )

    return (
      <div className="Calendar col-sm-10 offset-sm-1">
        <Calendar
          selectable
          defaultDate={new Date(dateString)} 
          views={['month']}
          defaultView="month"
          events={PostDate} // Feed in Redux Props
          style={{
            height: '85vh'
          }}
          onSelectEvent={event => this.toggle(event)} 
        />

        <Modal
          isOpen={this.state.modal}
          toggle={this.toggle}
          className='modal-comment-click'
          size="lg"
        >
          <ModalHeader toggle={this.toggle}>
            Date Going Live: {moment(this.state.start).format('ddd MMM Do')}
          </ModalHeader>
          <ModalBody className="row">
            <div className={!this.state.commentOpen ? 'col-sm-12' : 'col-md-6'}>
            </div>
            <div
              className='commentSection col-md-6 animated fadeInUp'
            >
              <div className="commentFeed">{commentsVariable}</div>
              <CommentForm social_id={this.state._id} />
            </div>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

ContentCalendar.propTypes = {
  getAllContent: PropTypes.func.isRequired, 
  content: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
  content: state.content,
  auth: state.auth,
});

export default connect(
  mapStateToProps,
  {
    getAllContent,
  }
)(Calendar);