单击事件名称（显示EventDetails）不会显示

Question

我有一个活动列表 可以通过点击创建事件按钮

来创建它们

在事件列表中 当我点击-name-事件时 它转到右侧的网址（事件/ {id}） 但不会显示事件（即有关事件名称，价格等的详细信息）

EventList.jsx

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { getAllEvents, getEvent, addEvent } from "../../actions/events";
import Paper from "@material-ui/core/Paper";
import Moment from "moment";
import { Redirect } from "react-router-dom";

class EventsList extends PureComponent {


  componentWillMount() {
    this.props.getAllEvents();
  }

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

  addEvent = event => {
    this.props.addEvent(event);
  };

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

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


    return (
      <div>
        <Paper className="styles" elevation={4}>
          <h1>Coming Events</h1>
          <table>
            <thead>
              <tr>
                <th>Event Name</th>
                <th>Starting</th>
                <th>Ending</th>
              </tr>
            </thead>
            <tbody>
              {eventsList.map(event => (
                <tr key={event.id}>
                  <td>
                    {" "}
                    <Link
                      className="link"
                      to={`/events/${event.id}`}
                      onClick={() => this.getEvent(event.id)}
                    >
                      {event.name}
                    </Link>
                  </td>
                                <td> {Moment(event.startDate).format('ll')}</td>
                                <td> {Moment(event.endDate).format('ll')}</td>
                  <td />
                </tr>
              ))}
            </tbody>
          </table>
          <br />
          <br />
          <Link className="link" to={`/createEvent`}>
            CREATE EVENT
          </Link>
        </Paper>
      </div>
    );
  }
}

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

export default connect(
  mapStateToProps,
  {
    getAllEvents,
    getEvent,
    addEvent
  }
)(EventsList);

和 EventDetails.jsx 应该显示 活动详情

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import { getEvents } from '../../actions/events'
import { getUsers } from '../../actions/users'
import { userId } from '../../jwt'
import Paper from 'material-ui/Paper'

class EventDetails extends PureComponent {

    componentWillMount() {
        if (this.props.authenticated) {
            if (this.props.events === null) this.props.getEvents()
            if (this.props.users === null) this.props.getUsers()
        }
    }


    render() {
        const { event, users, authenticated, userId } = this.props

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

        if (event === null || users === null) return 'Loading...'
        if (!event) return 'Not found'


        return <Paper className="outer-paper">
            <h1>Events: {event.name}</h1>

            <p>Price: {event.price}</p>
            <p>Description: {event.description}</p>

            <hr />
          </Paper>;
    }
}

const mapStateToProps = (state, props) => ({
    authenticated: state.currentUser !== null,
    userId: state.currentUser && userId(state.currentUser.jwt),
    event: state.events && state.events[props.match.params.id],
    users: state.users,

})

const mapDispatchToProps = {
    getEvents, getUsers
}

export default connect(mapStateToProps, mapDispatchToProps)(EventDetails)

actions / events.js

export const getEvent = eventId => (dispatch, getState) => {
  const state = getState();
  if (!state.currentUser) return null;
  const jwt = state.currentUser.jwt;

  if (isExpired(jwt)) return dispatch(logout());

  request
    .get(`${baseUrl}/events/${eventId}`)
    .set("Authorization", `Bearer ${jwt}`)
    .then(response =>
      dispatch({
        type: GET_EVENT,
        payload: response.body
      })
    )
    .catch(err => alert(err));
};

app.js（父级渲染EventDetails）

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
import LoginPage from './components/login/LoginPage'
import SignupPage from './components/signup/SignupPage'
import LogoutPage from './components/logout/LogoutPage'
import EventsList from './components/events/EventsList'
import CreateEvent from './components/events/CreateEvent'
import TopBar from './components/layout/TopBar'
import EventDetails from './components/events/EventDetails'
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
      <div>
       <TopBar />
       <br/><br/>
          <Route exact path="/events" component={EventsList} />
          <Route exact path="/events/:id" component={EventDetails} />

           {/* <Route exact path="/events/:id/tickets" component={TicketsList} /> */}
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/logout" component={LogoutPage} />
          <Route exact path="/signup" component={SignupPage} />
          <Route exact path="/createEvent" component={CreateEvent} />
          {/* <Route exact path="/createTicket" component={CreateTicket} /> */}
          <Route exact path="/" render={() => <Redirect to="/events" />} />

      </div>

      </Router>
    );
  }
}

export default App;