在執行 react-redux 項目時出現此錯誤。 錯誤：- TypeError：無法讀取 React-Redux 項目中未定義的屬性“地圖”

Question

我想通過使用 GET 請求在 HTML 中呈現一堆 json 數據。 我正在使用 react 和 redux 來管理對象的 state，我收到此錯誤。 TypeError：無法讀取未定義的屬性“地圖”

這是代碼

行動

    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 { combineReducers } from "redux";
import itemReducer from "./itemReducer";

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

配置存儲，我存儲初始 state 和減速器

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

您沒有在減速器上定義項目。 嘗試這個：

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