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中添加布尔值

.h-centered-item {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%)
}

.vh-centered-item {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

更新***

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,
    }
}

票证详细信息未显示（但显示为redux状态）

1 个答案: