Question

我正在尝试过滤掉所有到相应event_id的票证。当您创建故障单时（发生在具有ID的clicked事件中），它将所有值添加到数据库中，再加上您位于其中的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);

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

当我添加

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

通过event_id过滤出票证

1 个答案: