Обновите родительский компонент через Redux props - PullRequest
0 голосов
/ 20 февраля 2019

У меня есть секция комментариев на моем детальном представлении билета.На самом деле все работает нормально.У меня есть флаг с именем comment Created, который по умолчанию имеет значение false.После создания комментария устанавливается значение true.Я пытался использовать этот флаг в родительском компоненте.Я даже сопоставил его со штатом с помощью карты State To Props.

Однако, когда я создаю комментарий в дочернем компоненте (фактически дочернем по отношению к дочернему компоненту), для флага устанавливается значение true, так что это работает, однако родительский компонент родительского компонента не перезагружается.Сейчас я просто не использую полную перезагрузку в качестве обходного пути.Комментарии возвращаются правильно, с самым последним комментарием.Я просто надеялся на другой способ сделать это, не требующий полного рендеринга страницы.

TicketDetail where I call the api

class TicketDetail extends React.Component{
    componentDidMount(){
        const id = this.props.match.params.id
        console.log(id)
        this.props.getTicket(id)
    }
    render(){
        const {ticket, ticketFetched, commentCreated} = this.props
        console.log(this.props)
        return (
        <React.Fragment>
        {ticketFetched  && <div><TicketDetailView ticket={ticket} user={this.props.user} commentCreated={commentCreated}/> </div> }
        </React.Fragment>      
         )
    }
}

const mapStateToProps = (state) => {
    return{
        ticket: state.tickets.ticket,
        user: state.users.user,
        ticketFetched: state.tickets.ticketFetched,
        commentCreated: state.tickets.commentCreated
    }
  }
  const mapStateToDispatch = (dispatch) => ({
    getTicket: (id) => dispatch(actions.getTicket(id)),
  })


  //For use with React Router and Material UI
  export default withRouter(compose(
    withStyles(styles, { name: 'TicketDetail' }),
    connect(mapStateToProps, mapStateToDispatch)
  )(TicketDetail));

Контейнер вида (тупой)

import React from 'react'
import DateDisplay from '../usercontainers/DateDisplay'
import AssignTicket from '../ticketcomponents/AssignTicket'
import CommentList from '../ticketcomponents/CommentList'
import CreateComment from '../ticketcomponents/CreateComment'
export const TicketDetailView = (props) => {
    console.log('tdv')
    return (
        <div>


   <p>Subject:  {props.ticket.title}</p>
         <p>Description:  {props.ticket.body}</p>
          <p>Submitted By:  {props.ticket.created_by}</p>
         <p>Date Created:  <DateDisplay date={props.ticket.date} /></p>

              <AssignTicket ticket={props.ticket} user={props.user}> 
               </AssignTicket>
              <CommentList ticket={props.ticket} user={props.user} 
                commentCreated={props.commentCreated} />
             <CreateComment ticket={props.ticket} user={props.user}/>
            </div>
    )
}
export default TicketDetailView

Комментарий Создать компонент:

import React from 'react'
import * as actions from '../store/actions/ticketaction'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import compose from 'recompose/compose';
import TicketListView from '../ticketcontainers/TicketListView'
const styles = theme => ({})



class CreateComment extends React.Component {
    handleSubmit = (e) => {
        // e.preventDefault();
        const date = Date.now()
        const user = this.props.user.username
        const ticket = this.props.ticket.id
        this.props.postComment(e.target.comment.value, date, user, ticket)
        };

    render(){
        console.log(this.props)
        let commentStatus = null
        if(this.props.commentCreated){
            commentStatus = (
                <p>Your comment added</p>
            )
        }
        return(
            <form onSubmit={this.handleSubmit}>
            {commentStatus}
            <textarea
            name='comment'></textarea>
            <button
            type='submit'>Submit 
            </button>
            </form>

        )
    }

}

const mapStateToDispatch = (dispatch) => ({
    postComment: (comment, date, user, ticket) => 
 dispatch(actions.postComment(comment, date, user, ticket)),
  })

export default withRouter(connect(null, mapStateToDispatch)(CreateComment))

Что еще я могу сделать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...