React Redux TypeError：无法读取未定义的属性“地图”

Question

我是 React/Redux 编码的初学者。我迷失在容器和反应组件中。在 Redux 之前，我可以轻松获取 JSON 数据。由于状态复杂，我决定学习 Redux。没有时间让我问这个问题。 我不明白为什么我的道具没有装满减速器。

（我正在尝试获取名称为“事件”的 json 数组。）

这是我的代码：

./actions/eventAction.js

    import C from './actionType';
export function fetchEvents() {

  return function (dispatch) {
    dispatch(requestEvent());
    return fetch('http://localhost:3000/json/data.json')
    .then(handleErrors)
    .then(
       response => response.json(),
       error => console.log('An error occurred.', error),
   )
    .then((json) => {
       dispatch(receivedEvents(json));
    },
   );

  };
 }

export const requestEvent = () => ({
  type: C.REQUEST_EVENT
});
export const receivedEvents = json => ({
  type: C.RECEIVED_EVENTS,
  payload: json.events
});


// Handle HTTP errors since fetch won't.
function handleErrors(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

./Component/Event.js

import React from 'react'
import PropTypes from 'prop-types'

export const Event = ({ title, description, category, tags, img, onClick}) => (
    <div className="card eq-event-card mb-5">
    <img className="img-speech-bubble card-img-top eq-event-img" src={img} alt="Card image cap"></img>
    <div className="card-body shadow-lg">
      <div className="container d-flex flex flex-column mb-5">
        <div className="fab-button justify-content-center">

        <i className="fas fa-plus my-3" />
        </div>
        <div className="eq-event-header container d-flex flex-row justify-content-between">
          <div className="eq-event-title col-md-9">
          <p className="card-title h3 text-right">
             {title}
          </p>
          </div>
          <div className="eq-event-cat text-center col-md-3" >
                 <p className="h5">{category})</p>
          </div>
        </div>
        <div className="container">
          <div className="row">
            <div className="eq-event-desc col-md-8 col-sm-12">
              <p className="text-justify card-text text-muted">
                {description}
              </p>
            </div>
            <div className="eq-event-tag col-md-4 col-sm-12 ">
              <ul className="text-justify">
                <li className="text-muted">{tags}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div className="d-flex justify-content-center">
        <button onClick={onClick} href="#" className="more-button btn btn-primary">اطلاعات بیشتر <i className="fas fa-arrow-left" /></button>
      </div>
    </div>
  </div>

)


Event.propTypes = {
    id: PropTypes.number.isRequired,
    title: PropTypes.string.isRequired,
    desc: PropTypes.string.isRequired,
    category: PropTypes.string.isRequired,
    tags: PropTypes.arrayOf(PropTypes.string),
    onClick: PropTypes.func.isRequired,
    img: PropTypes.string.isRequired
  }

export default Event

./Components/EventList.js

import React from 'react'
import PropTypes from 'prop-types'
import Event from './Event'

export const EventList = ({events}) => (

    events.map((event, index) => (
        <Event key={index} {...event} />

    ))

)

EventList.propTypes = {
    events: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.number.isRequired,
            title: PropTypes.string.isRequired,
            desc: PropTypes.string.isRequired,
            category: PropTypes.string.isRequired,
            tags: PropTypes.arrayOf(PropTypes.string),
            img: PropTypes.string.isRequired
        }).isRequired
    ).isRequired,
}

export default EventList

./containers/EventListHandler

import { connect } from 'react-redux'
import {fetchEvents, receivedEvents} from '../actions/eventAction'
import EventList from '../components/EventList'
import {C} from '../actions/actionType'
const getEvents = (events, actionType) => {
    switch(actionType) {
        case C.RECEIVED_EVENTS:
            return events
        default: 
            throw new Error('Errorororor!')
    }
}

const mapStateToProps = state => {
    return {
        events: getEvents(state.events, C.RECEIVED_EVENTS )
    }
}

const mapDispatchToProps = dispatch => {
    return ({
      fetchEvents: () => {dispatch(receivedEvents)}
    })
}

const ShowEventList = connect(
    mapStateToProps,
    mapDispatchToProps
)(EventList)

export default ShowEventList

./reducers/eventReducer.js

import {C} from '../actions/actionType';

export default (state = [], action) => {
    switch (action.type){

      case C.RECEIVED_EVENTS:
      return [
        ...state,
        Object.assign({}, action.payload)
      ];

      default:
        return state;
    }
  };

./reducers/index.js

    import { combineReducers } from 'redux';
import EventReducer from './eventReducer';

export const rootReducer = combineReducers({
 events: EventReducer
});

export default rootReducer;

和错误信息：

警告：失败的道具类型：道具events在 EventList，但其值为undefined。 在事件列表中

---

更新： src/index.js

    import React from 'react';
import ReactDOM from 'react-dom';
import {Place, Time} from './plan';
import {Event} from './containers/EventListHnadler'
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import rootReducer from './reducers/index'
const store = configureStore(rootReducer);

ReactDOM.render(
    <Provider store={store}>
        <Event />
    </Provider>, document.getElementById('event-entry'));
    ReactDOM.render(<Place />, document.getElementById('select-place'))
    ReactDOM.render(<Time />, document.getElementById('select-time'))


serviceWorker.register();

Answer 1

我真的不确定你在哪里使用这个ShowEventList 但是如果条件在哪里使用

 render(){
  <div>
   {
    events && events.length>0 &&
    <ShowEventList events={this.events} />
   }

  </div>
  }

这将确保您的 EventList 组件始终接收道具