通过event_id过滤出票证

Question

我试图过滤掉所有票证到相应的event_id 。 创建票证时（发生在具有ID的clicked事件中），它会将所有值添加到数据库中，并添加您所在的event_id 。

在事件组件内部，我映射了数据库中的所有票证，并且希望过滤出相应事件的票证（即，仅显示单击了事件ID的票证）

但是当我尝试--(console.log(tickets.events)--票证数组中的events对象时，它返回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);

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

当我添加

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