按event_id过滤出门票

Question

我正在尝试过滤掉相应event_id的所有门票。当你创建一个票证（发生在点击事件中，它有一个id）时，它会将所有值添加到数据库中，加上你所在的event_id。

在事件组件内部，我映射数据库中的所有票证，并且我想过滤掉相应事件的票证（即仅显示具有点击事件的票证Id）

但是当我尝试--(console.log(tickets.events)-- ticket数组中的事件对象时，它返回undefined。图像显示--console.log(tickets)--

[！[控制台与状态] [1]] [1]

我的代码

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getAllTickets, getTicket, addTicket } from "../../actions/tickets";
import { getCurrentUser, getUsers } from "../../actions/users";
import { getAllEvents, getEvent } from "../../actions/events";
import Paper from "@material-ui/core/Paper";
import { Redirect } from "react-router-dom";



class TicketsList extends PureComponent {
  componentWillMount() {
    this.props.getAllTickets();
    this.props.getAllEvents();
  }

  getTicket(ticketId) {
    this.props.getTicket(ticketId);
  }
  getEvent(eventId) {
    this.props.getEvent(eventId);
  }

  getCurrentUser(userId) {
    this.props.getCurrentUser(userId);
  }

  addTicket = ticket => {
    this.props.addTicket(ticket);
  };

  render() {
    const { tickets, events, authenticated } = this.props;
    const ticketsList = tickets.sort((a, b) => {
      return a.id - b.id;
    });

    if (!authenticated) return <Redirect to="/login" />;

    console.log(tickets[0].events);

    return <div>
        <Paper className="styles" elevation={4}>
          <h1>Available Tickets</h1>

          <table>
            <thead>
              <tr>
                <th>Author</th>
                <th>Price</th>
                <th>Description</th>
              <th>events id</th>

              </tr>
            </thead>
            <tbody>
              {ticketsList.map(ticket => <tr key={ticket.id}>
                  <td>
                    <Link className="link" to={`/tickets/${ticket.id}`} onClick={() => this.getTicket(ticket.id)}>
                      {ticket.users.firstName}

                    </Link>
                  </td>

                  <td>€{ticket.price}</td>

                  <td style={{ border: "2px solid black" }}>
                    {ticket.description}
                  </td>
              <td style={{ border: "2px solid black" }}>
                {ticket.events.id}
              </td>

                  <td />
                </tr>)}
            </tbody>
          </table>
          <br />
          <br />
          <Link className="link" to={`/addTicket`}>
            ADD TICKET
          </Link>
        </Paper>
      </div>;
  }
}

const mapStateToProps = (state) => {
  return {
    tickets: state.tickets,
    ticket: state.ticket,
    authenticated: state.currentUser !== null,
    users: state.users === null ? null : state.users,
    events: state.events,
    event: state.event
  };
};

export default connect(
  mapStateToProps,
  {
    getAllTickets,
    getTicket,
    addTicket,
    getCurrentUser,
    getUsers,
    getAllEvents,
    getEvent
  }
)(TicketsList);

奇怪的是我可以访问ticket数组中的用户对象并显示作者的名字，但是与事件相关的任何内容都返回undefined。

当我添加

<td style={{ border: "2px solid black" }}>
            {ticket.events.id}
          </td>

在map函数内部，它确实渲染了相应的event_id。

Answer 1

tickets是一个数组，因此事件与特定的ticket相关联。您必须以这种方式访问​​第一张票：tickets[0].events。 生成的console.log是：console.log(tickets[0].events)