工单详细信息未显示（但显示为 redux 状态）

Question

我有一个 TicketList，它映射了数据库中的所有票。 ID、价格和描述显示在列表中。 ID是可点击的 并且应该将您重定向到向您显示票证详细信息的票证（TicketDetail 组件）。 重定向有效 - 它会将您带到正确的 url 并调度一个操作 (GET_TICKET)。

            <Link
              className="link"
              to={`/tickets/${ticket.id}`}
              onClick={() => this.getTicket(ticket.id)}
            >
              {ticket.id}
            </Link>

状态 (Redux) 已更新，出现正确的票证

但我的 TicketDetails 没有显示出来

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { getTicket } from "../../actions/tickets";
import { getUsers } from '../../actions/users'
import { userId } from '../../jwt'
import Paper from 'material-ui/Paper'


class TicketDetails extends PureComponent {

    componentWillMount() {
        if (this.props.authenticated) {
            if (this.props.tickets === null) this.props.getTicket();
            if (this.props.users === null) this.props.getUsers()
        }
    }

    render() {
        const { ticket, users } = this.props


        if (ticket === null || users === null) return 'Loading...'
        if (!ticket) return 'Not found'


        return(
            <div>
            <Paper className="outer-paper">
            <h1>Ticket: {ticket.id}</h1> {/* should display authors name */}
            <p>Price: {ticket.price}</p>
            <p>Description: {ticket.description}</p>
            <hr />
          </Paper>
            </div>

          )

    }
}

const mapStateToProps = (state, props) => {
    console.log('price', state.tickets.price)
    console.log('ticket', state.ticket);
    console.log('id', props.match.params.id);
    return {
        authenticated: state.currentUser !== null,
        userId: state.currentUser && userId(state.currentUser.jwt),
        ticket: state.tickets && state.tickets[props.match.params.id],
        users: state.users,
    }
}

const mapDispatchToProps = {
    getTicket,
    getUsers
};

export default connect(mapStateToProps, mapDispatchToProps)(TicketDetails)

Answer 1

您正在尝试在 mapStateToProps 中添加一个布尔值

const mapStateToProps = (state, props) => {
    console.log('price', state.tickets.price)
    console.log('ticket', state.ticket);
    console.log('id', props.match.params.id);
    return {
        authenticated: state.currentUser !== null,
        userId: state.currentUser && userId(state.currentUser.jwt),// here also boolean value will be added
        ticket: state.tickets.filter((ticket) => (ticket.id === props.match.params.id)),
        users: state.users,
    }
}

更新***

const mapDispatchToProps = (dispatch) => {
     return {
            getTicket : () => dispatch(getTicket()),
            getUsers : () => dispatch(getUsers())
     }    


};