У меня есть секция комментариев на моем детальном представлении билета.На самом деле все работает нормально.У меня есть флаг с именем 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))
Что еще я могу сделать?