Question

我正在尝试学习React Redux，并试图使用包含获取，删除和添加商品的购物清单来创建一个简单的示例。

我有一个示例here，该示例显示了它如何使用获取和删除项目。

我的问题是带有添加项的减速器。

Here是相同的示例，但在reducer中具有附加项。

case ADD_ITEM:
  return{
    ...state,
    items: [...state.items, {id: uuid(),  action.payload}]
  }

它在抱怨action.payload

我在本地得到的错误是

./src/reducers/itemReducer.js
  Line 26:  Parsing error: Unexpected token, expected ","

  24 |       return{
  25 |         ...state,
> 26 |         items: [...state.items, {id: uuid(),  action.payload}]
     |                                                     ^
  27 |       }  
  28 |     default:
  29 |       return state

任何人都可以看到我在做什么吗

Answer 1

您正在使用此语句{id: uuid(), action.payload}创建对象。您为第一个条目提供密钥，但为第二个输入密钥。看着您的项目对象，它需要名称键。

尝试将其更改为此： {id: uuid(), name: action.payload}

Answer 2

编辑您的操作：

export const addItem = (name) =>{
  return{
    type: ADD_ITEM,
    payload: { name }
  }
}

然后，编辑减速器：

export default function(state = initialState, action){
  switch(action.type){
    case GET_ITEMS:
      return{
        ...state
      }
    case DELETE_ITEM:
      return{
        ...state,
        items: state.items.filter(item => item.id !== action.payload)
      }  
    case ADD_ITEM:
      return{
        ...state,
        items: [...state.items, {...action.payload, id: uuid()}]
      }  
    default:
      return state  
  }
}

React Redux-操作失败，解析错误

2 个答案: