Question

我在机票详细信息视图上有一个评论部分。实际上一切正常。我有一个名为comment Created的标志，默认情况下将其设置为false。创建注释后，将其设置为true。我试图在父组件中使用该标志。我什至使用地图州到道具将其映射到州。

但是，当我在子组件（实际上是子组件的子组件）中创建注释时，该标志将设置为true，因此可以正常工作，但是父组件的父组件不会重新加载。我现在正在做的只是不使用完全重新加载作为解决方法。注释会以这种方式正确返回，并带有最新的注释。我只是希望采用一种不需要整页呈现的不同方式。

earliest

视图（哑）容器

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

我还能做什么？

通过Redux道具更新父组件

0 个答案: