Arrays React redux状态阵列管理

因此，我基本上开始学习Redux，并希望创建一个简单的商店应用程序，您可以将手机添加到购物车中。我已经创建了一个state对象，在其中，我创建了一个数组，其中包含存储中的项目列表。我想在[+]上更新订购的物品数量，但现在还不行。我已经为此挣扎了一个小时，但仍然不知道问题出在哪里

减速器看起来是这样的：

const initialState = {
liked:0,
cart:0,
item: [
    {
        id:1,
        name: 'Iphone 8',
        price: 2000,
        desc: 'The new Iphone 8 available at our store!',
        orderedNum: 0
    },
    {
        id:2,
        name: 'Iphone 6',
        price: 1500,
        desc: 'The new Iphone 6 available at our store!',
        orderedNum: 0
    },
    {
        id:3,
        name: 'Samsung S8',
        price: 2200,
        desc: 'The new Samsung S8 available at our store!',
        orderedNum: 0
    },
    {
        id:4,
        name: 'Xiaomi Mi 6',
        price: 1400,
        desc: 'The new Xiaomi Mi 6 available at our store!',
        orderedNum: 0
    },
    {
        id:5,
        name: 'Pocophone P1',
        price: 2100,
        desc: 'The new Pocophone P1 available at our store!',
        orderedNum: 0
    },
    {
        id:6,
        name: 'Nokia 3310',
        price: 999,
        desc: 'The new Nokia 3310 available at our store!',
        orderedNum: 0
    },
]
}

const reducer = (state = initialState, action) => {
const newState = {...state};

switch(action.type) {
    case 'ADD_NUM':
        return state.item.map((el, index) => {
            if(el.id === action.id ){
                return {
                    ...el,
                    orderedNum: el.orderedNum + 1
                }
            }

            return el;
        })
    default:
        break;
}

return newState;
}

export default reducer;

• 我有以下行动：

  const mapStateToProps = state => {
  return {
  item: state.item
  }
  }
  
  const mapDispatchToProps = dispatch => {
  return {
  addNum: () => dispatch ({
    type: 'ADD_NUM',
    id: this.props.id,
   value: 1
  })
  }
  

我尝试过不同的方法，但我相信这可能是在减速器嵌套的问题

---

有人可以建议吗？

您的减速器应该是这样的：

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.item];
    case 'REMOVE_ITEM':
      return state.filter(({ id }) => id !== action.id);
    default:
      return state;
  }
};

正如在注释中指出的，上面的操作将适用于初始状态，即数组而不是对象。。。如果它是一个对象（使用lodash

mapKeys

和

omit

中的两个帮助器方法），下面介绍如何处理它：

export default (state = {}, action) => {
  switch (action.type) {
    case FETCH_ITEMS:
      return { ...state, ...mapKeys(action.payload, 'id') };
    case FETCH_ITEM:
      return { ...state, [action.payload.id]: action.payload };
    case CREATE_ITEM:
      return { ...state, [action.payload.id]: action.payload };
    case EDIT_ITEM:
      return { ...state, [action.payload.id]: action.payload };
    case DELETE_ITEM:
      return omit(state, action.payload);
    default:
      return state;
  }
};

---

让我们从你的减速机开始

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "ADD_NUM":
      return {
        // destruct and return a new object otherwise react wont update the UI
        ...state,
        item: state.item.map(el =>
          el.id === action.id
            ? { ...el , orderedNum: el.orderedNum + action.value }
            : el
        )
      };
    default:
      return state;
  }
};

mapDispatchToProps

const mapDispatchToProps = dispatch => {
  return {
    // add id to addNum
    addNum: id =>
      dispatch({
        type: "ADD_NUM",
        id,
        value: 1
      })
  };
};

项目组件

const Items = ({ item, addNum }) => (
  item.map(el => (
    <div key={el.id}>
      <h1>{el.name}</h1>
      <h3>{el.price}</h3>
      <h3>{`orderedNum: ${el.orderedNum}`}</h3>
      // add the id to addNum
      <button onClick={() => addNum(el.id)}>+</button>
    </div>
  ))
);

const Items=（{item，addNum}）=>(
item.map（el=>(
{el.name}
{el.price}
{`orderedNum:${el.orderedNum}`}
//将id添加到addNum
addNum（el.id）}>+
))
);

---

您的reducer看起来不正确，您当前正在返回一个基于映射的

状态的新数组。item

，但不是一个具有属性

item

的对象，该属性是一个数组…您是否已经调试了从组件内部的

映射状态rops

中得到的内容，或者您到目前为止是如何调试问题的？除了hat他的initialState和mapStateToProps是一个对象而不是数组，因此您忽略了原始结构非常感谢您的帮助。我刚刚分析了它，它非常有用！：）