在执行 react-redux 项目时出现此错误。 错误：- TypeError：无法读取 React-Redux 项目中未定义的属性“地图”

Question

I wan to render a bunch of json data in the HTML by using GET request. I'm using react and redux to manage the state of the objects, I getting this error. TypeError: Cannot read property 'map' of undefined

Here's the code

Action

    import { GET_ITEM, ADD_ITEM, DELETE_ITEM } from "./types";

export const getItems = () => {
  return {
    type: GET_ITEM,
  };
};

Reducer

    import { v4 as uuid } from "uuid";
import { GET_ITEM, ADD_ITEM, DELETE_ITEM } from "../actions/types";

const initialState = [
  { id: uuid(), name: "Eggs" },
  { id: uuid(), name: "Milk" },
  { id: uuid(), name: "Bread" },
  { id: uuid(), name: "Water" },
];

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_ITEM:
      console.log("inside reducer");
      return {
        ...state,
      };
    default:
      return state;
  }
};
export default itemReducer;

Component

    import React, { Component } from "react";
import "../App.css";
import { v4 as uuid } from "uuid";
import { Container, Button, ListGroup, ListGroupItem } from "reactstrap";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { getItems } from "../actions/itemActions";
import { connect } from "react-redux";
import propTypes from "prop-types";

class ShoppingList extends Component {
  componentDidMount() {
    console.log("inside componentDidMount");
    this.props.getItems();
  }

  onClick = () => {
    const name = prompt("Enter name");
    if (name) {
      this.setState((state) => ({
        items: [...state.items, { id: uuid(), name: name }],
      }));
    }
  };

  render() {
    const items = this.props.items;
    return (
      <div>
        <Container>
          <Button
            color="dark"
            style={{ marginBottom: "2em" }}
            onClick={this.onClick}
          >
            Add Item
          </Button>
          <ListGroup>
            <TransitionGroup>
              {items.map(({ id, name }) => (
                <CSSTransition key={id} timeout={500} classNames="fade">
                  <ListGroupItem>
                    <Button
                      className="remove-btn"
                      color="danger"
                      size="sm"
                      onClick={() => {
                        this.setState({
                          items: items.filter((item) => item.id !== id),
                        });
                      }}
                    >
                      &times;
                    </Button>
                    {name}
                  </ListGroupItem>
                </CSSTransition>
              ))}
            </TransitionGroup>
          </ListGroup>
        </Container>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({ items: state.item.items });

export default connect(mapStateToProps, { getItems })(ShoppingList);

Index reducer, where i combine everything

    import { combineReducers } from "redux";
import itemReducer from "./itemReducer";

export default combineReducers({
  item: itemReducer,
});

Configure Store, where i store the initial state and the reducer

import { applyMiddleware, createStore, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const initialtState = {};

const middelware = [thunk];

const store = createStore(
  rootReducer,`enter code here`
  initialtState,
  compose(
    applyMiddleware(...middelware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

Answer 1

You didn't define items on your reducer. Try this:

const initialState = {
  items: [
    { id: uuid(), name: "Eggs" },
    { id: uuid(), name: "Milk" },
    { id: uuid(), name: "Bread" },
    { id: uuid(), name: "Water" },
  ]
};