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

我希望通过使用GET请求在HTML中呈现一组json数据。我使用react和redux来管理对象的状态， 我得到了这个错误。 TypeError:无法读取未定义的属性“map”

这是密码

行动

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

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

减速器

    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;

组成部分

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

配置存储，其中存储初始状态和缩减器

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;

---

您没有在减速器上定义项目。 试试这个：

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

---

您没有在减速器上定义项目。 试试这个：

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