-2

我使用来自mern.io的入门模板。当我尝试运行以下代码时，出现错误：“ReferenceError: props is not defined”

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

获取事件：

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

路线.js：

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

4

1 回答 1

0

以下是调试的工作原理：

有两个地方可以使用变量props：

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

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

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

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

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

于 2017-06-03T17:00:12.930 回答