问题

Question

我正在使用 React Big Calendar 和 react-strap Modal 的组合。当用户单击日历上的日期事件时，将打开一个带有注释表单的模式。

问题

我的问题是，当我发布关于提交的评论时，后台的日历会重新加载带有新评论的新日期事件加上原始日期事件，所以我有2个日期事件一个没有新评论，另一个没有我刚刚发布的新评论。

预期结果

模式中的注释供稿应使用新注释而不是日历组件更新。

我在下面粘贴了我的reducer和action代码。我应该像我一直在阅读或更新的大多数问题（如我创建的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);

提交评论后更新模态组件

问题

预期结果

0 个答案: