如何从redux状态删除项目？

用户名

我不知道如何从redux状态中使用onClick删除项目。

let initialState = {
  items: [
      {
       name: 'A',
       age: 23
      },
      {
       name: 'B',
       age: 20
      },
      {
      name: 'C',
      age: 29
      }
     ]
    }

然后我用我的组件中的列表呈现对象：

const listItems = this.props.MyState.items.map((item) =>
  <li key={item.name} onClick=event => this.props.deleteItem(event, item) >{item.name}</li>
);

然后通过action.payload将此项目传递给减速器

但后来我不知道如何从状态中删除项目。

例如：action.payload我得到的项目在onClick这里如何弄清楚？

case DELETE_ITEM:
      return { ...state, ? };

很酷的家伙

考虑到您的状态为array of objects，一种解决方案是通过其索引消除所选项目。您还应该避免在redux中进行直接的状态突变，因为这会导致副作用。如果您打算进行某种形式的变异（删除，更新），请始终尝试创建状态的深层克隆或副本。因此，涵盖所有基础：

您的减速器应该看起来像：

let initialState = {
  items: [
      {
       name: 'A',
       age: 23
      },
      {
       name: 'B',
       age: 20
      },
      {
      name: 'C',
      age: 29
      }
  ]
}

const userReducer = (state = initialState, action) => {
   switch(action.type){
      case ADD_ITEM:
         ...
      case DELETE_ITEM:
         return {
           ...state,
           items: state.items.filter((item, index) => index !== action.payload)
         }
   }
}

在这种情况下，我们只是将设置action.payload为项目的索引，而不是整个项目。

因此，您的动作创建者应如下所示：

export const deleteItem = (index) => {
   dispatch({
      type: DELETE_ITEM,
      payload: index
   })
}

现在，我们可以真正简化您的标记。只需使用index参数in.map()即可满足我们的动作创建者的参数。

const listItems = this.props.MyState.items.map((item, index) =>
  <li key={item.name} onClick={() => this.props.deleteItem(index)} >{item.name}</li>
);

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。