Javascript 在redux中未调用MapStateTops，未定义状态

App.js

ShopCart.js

TypeError: Cannot read property 'items' of undefined
Function.mapStateToProps [as mapToProps]
src/shopHome.js:47
  44 | }
  45 | const mapStateToProps = state => {
  46 |   return {
> 47 |     items: state.items
  48 |   };
  49 | };
  50 | )

action_type.js

import { ADD_TO_CART, ADD_QUANTITY, SUBTRACT_QUANTITY } from "./action.js";

const initialState = {
  items: [
    {
      id: 1,
      name: "apple",
      description: "Eat One Every Day, may keep the doctor away",
      price: 12
    },
    {
      id: 2,
      name: "grape",
      description: "Wine is great, but grapes is better",
      price: 11
    },
    {
      id: 3,
      name: "pineapple",
      description: "enjoy but don`t forget to peer first",
      price: 8
    }
  ],
  addedItems: []
};

const reducer = (state = initialState, action) => {
  if (action.type === ADD_TO_CART) {
    let addedItem = state.items.find(item => item.id === action.id);
    let existed_item = state.addedItems.find(item => item.id === action.id);
    if (existed_item) {
      addedItem.quantity += 1;
      return {
        ...state
      };
    } else {
      addedItem.quantity = 1;
      return {
        ...state,
        addedItems: [...state.addedItems, addedItem]
      };
    }
  }

  if (action.type === ADD_QUANTITY) {
    let addedItem = state.items.find(item => item.id === action.id);
    addedItem.quantity += 1;
    return {
      ...state
    };
  }

  if (action.type === SUBTRACT_QUANTITY) {
    let addedItem = state.items.find(item => item.id === action.id);
    if (addedItem.quantity === 1) {
      let newItem = state.addedItems.filter(item => item.id !== action.id);
      return {
        ...state,
        addedItems: newItem
      };
    } else {
      addedItem.quantity -= 1;
      return {
        ...state
      };
    }
  }
};

export default reducer;

action.js

import { ADD_TO_CART, ADD_QUANTITY, SUBTRACT_QUANTITY } from "./action";

export const addToCart = id => {
  return {
    type: ADD_TO_CART,
    id
  };
};

export const addQuantity = id => {
  return {
    type: ADD_QUANTITY,
    id
  };
};

export const subtractQuantity = id => {
  return {
    type: SUBTRACT_QUANTITY,
    id
  };
};

---

大家好，我是react redux新手，当我打开页面时，页面一直告诉我TypeError:无法读取ShopHome.js中未定义的属性'items'，我支持在mapStateToProps函数中声明状态有问题。有人能帮我一下吗？

如果没有满足任何操作（即当减速器初始化时），您就不会从减速器返回状态。尝试添加一个简单的

返回状态在所有这些条件之后，看看错误是否仍然出现。同时请添加减速机的索引文件。。。所讨论的错误似乎是导入错误…@Andy的错误将在运行时显示。。。考虑他的解决方案……“安迪，我真的很感激你的解决方案，并且页面在添加返回状态后似乎正在工作；
TypeError: Cannot read property 'items' of undefined
Function.mapStateToProps [as mapToProps]
src/shopHome.js:47
  44 | }
  45 | const mapStateToProps = state => {
  46 |   return {
> 47 |     items: state.items
  48 |   };
  49 | };
  50 | )

import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { addQuantity } from "./action_type";
import { subtractQuantity } from "./action_type";

class ShopCart extends Component {
  handleAddQuantity = id => {
    this.props.addQuantity(id);
  };

  handleSubtractQuantity = id => {
    this.props.subtractQuantity(id);
  };
  render() {
    let addedItems = this.props.items.map(item => {
      return (
        <tr key={item.id}>
          <td>{item.name}</td>
          <td>
            <NavLink to="/myCart">
              <span>
                <i
                  className="fas fa-plus-circle"
                  onClick={() => {
                    this.handleAddQuantity(item.id);
                  }}
                ></i>
              </span>
            </NavLink>
            {item.quantity}
            <NavLink to="/myCart">
              <span>
                <i
                  className="fas fa-minus-circle"
                  onClick={() => {
                    this.handleSubtractQuantity(item.id);
                  }}
                ></i>
              </span>
            </NavLink>
          </td>
          <td>${item.price}</td>
        </tr>
      );
    });
    return (
      <div>
        <table className="table">
          <thead>
            <tr>
              <th>Item</th>
              <th>Quantity</th>
              <th>Price</th>
              <th>
                <NavLink to="/" exact activeStyle={{ color: "green" }}>
                  <a href="#">back to store</a>
                </NavLink>
              </th>
            </tr>
          </thead>
          <tbody>{addedItems}</tbody>
        </table>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    items: state.addedItems
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addQuantity: id => dispatch(addQuantity(id)),
    subtractQuantity: id => dispatch(subtractQuantity(id))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(ShopCart);

import { ADD_TO_CART, ADD_QUANTITY, SUBTRACT_QUANTITY } from "./action.js";

const initialState = {
  items: [
    {
      id: 1,
      name: "apple",
      description: "Eat One Every Day, may keep the doctor away",
      price: 12
    },
    {
      id: 2,
      name: "grape",
      description: "Wine is great, but grapes is better",
      price: 11
    },
    {
      id: 3,
      name: "pineapple",
      description: "enjoy but don`t forget to peer first",
      price: 8
    }
  ],
  addedItems: []
};

const reducer = (state = initialState, action) => {
  if (action.type === ADD_TO_CART) {
    let addedItem = state.items.find(item => item.id === action.id);
    let existed_item = state.addedItems.find(item => item.id === action.id);
    if (existed_item) {
      addedItem.quantity += 1;
      return {
        ...state
      };
    } else {
      addedItem.quantity = 1;
      return {
        ...state,
        addedItems: [...state.addedItems, addedItem]
      };
    }
  }

  if (action.type === ADD_QUANTITY) {
    let addedItem = state.items.find(item => item.id === action.id);
    addedItem.quantity += 1;
    return {
      ...state
    };
  }

  if (action.type === SUBTRACT_QUANTITY) {
    let addedItem = state.items.find(item => item.id === action.id);
    if (addedItem.quantity === 1) {
      let newItem = state.addedItems.filter(item => item.id !== action.id);
      return {
        ...state,
        addedItems: newItem
      };
    } else {
      addedItem.quantity -= 1;
      return {
        ...state
      };
    }
  }
};

export default reducer;

import { ADD_TO_CART, ADD_QUANTITY, SUBTRACT_QUANTITY } from "./action";

export const addToCart = id => {
  return {
    type: ADD_TO_CART,
    id
  };
};

export const addQuantity = id => {
  return {
    type: ADD_QUANTITY,
    id
  };
};

export const subtractQuantity = id => {
  return {
    type: SUBTRACT_QUANTITY,
    id
  };
};

export const ADD_TO_CART = "ADD_TO_CART";

export const ADD_QUANTITY = "ADD_QUANTITY";

export const SUBTRACT_QUANTITY = "SUBTRACT_QUANTITY";