javascript - 按 event_id 过滤门票

Question

我正在尝试过滤掉对应 event_id 的所有门票。 当您创建票证时(发生在单击的事件内，该事件有一个 id)， 它将所有值以及您所在的 event_id 添加到数据库中。

在事件组件内，我映射了数据库中的所有门票 我想过滤掉相应事件的门票(即仅显示具有点击事件 ID 的门票)

但是当我尝试 --(console.log(tickets.events)-- 票证数组内的事件对象时， 它返回未定义。 该图像显示 --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);

奇怪的是，我可以访问门票数组内的用户对象并显示作者的姓名，但与事件相关的任何内容都返回未定义。

当我添加时

<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)