Question

我使用mern.io中的初学者模板。当我尝试运行以下代码时，我收到错误：“ReferenceError：props未定义”

EventDetailPage.js：

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';

// Import Actions
import {fetchEvent} from '../../EventActions';

// Import Selectors
import {getEvent} from '../../EventReducer';

function EventDetailPage(props) {
  return (
    <div>
      <h3>{props.event.name}</h3>
    </div>
  // null
  );
}

// Actions required to provide data for this component to render in server side.
EventDetailPage.need = [params => {
    return fetchEvent(params.id);
  }
];

// Retrieve data from store as props
function mapStateToProps(state, props) {
  return {
    event: getEvent(state, props.params.id)
  };
}

export default connect(mapStateToProps)(EventDetailPage);

fetchEvent（API调用正在运行）：

export function fetchEvent(id) {
  return (dispatch) => {
    return callApi(`events/${id}`).then(res => dispatch(addEvent(res.event)));
  };
}

getEvent：

export const getEvent = (state, id) => state.events.data.filter(event => event.id === id)[0];

routes.js：

<Route
  path="/events/:name-:id"
  getComponent={(nextState, cb) => {
    require.ensure([], require => {
      cb(null, require('./modules/Event/pages/EventDetailPage/EventDetailPage').default);
    });
  }}
/>

Answer 1

以下是调试的工作原理：

您有两个地方使用变量props：

      <h3>{props.event.name}</h3>

，这表明您应该测试独立调用EventDetailPage(...)（单元测试）以检查此功能是否正常，并且

function mapStateToProps(state, props) {
  return {
    event: getEvent(state, props.params.id)

，如果它不起作用将意味着Redux API被破坏 - 它不是 - 但要确保在返回之前可以尝试console.log(props)。

从我可以阅读的代码中，我认为它在某些未在您的片段中复制的地方失败，但由于您没有提供完整的追溯（至少是文件和行号），因此很难知道

为什么没有定义来自Redux的道具

1 个答案: