反应redux如何从状态数组中删除对象答案

【问题标题】：react redux how to delete object from state array反应redux如何从状态数组中删除对象
【发布时间】：2021-07-12 20:03:13
【问题描述】：

我有一个状态数组，我想从中删除一个对象。例如，我有：

[
 {
  name:'bench',
  weight: 200
 },
{
  name:'squat',
  weight: 300
 },
]

如果用户愿意，我想为他们提供删除练习的选项，但我不知道怎么做。这是我的减速器：

const initialState = [];

const movementReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_MOVEMENT: 
            return [ 
                ...state, action.payload
            ];
        case UPDATE_MOVEMENT:
            return [
                ...state.map(item => item.movementName === action.payload.movementName ? action.payload : item  )
            ];
        case DELETE_MOVEMENT:
            return [
                state.filter(item => item.movementName === action.payload.movementName ? "true" : "false"  )
            ];
        default:
            return state;
    }
};

export default movementReducer;

使用我现在拥有的代码，页面上没有返回任何内容，但我仍然可以在我的 redux devtools 中看到我的状态，这意味着它仍然存在。有什么帮助吗？

【问题讨论】：

标签： arrays redux react-redux state

【解决方案1】：

在您的过滤器中，您从比较中返回 "true" 或 "false"，但这两个值都是真实的：例如Boolean("false") === true.

将您的运动减速器更改为如下所示：

const movementReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_MOVEMENT: 
            return [ 
                ...state, action.payload
            ];
        case UPDATE_MOVEMENT:
            return [
                ...state.map(item => item.movementName === action.payload.movementName ? action.payload : item  )
            ];
        case DELETE_MOVEMENT:
            return [
                ...state.filter(item => item.movementName === action.payload.movementName)
            ];
        default:
            return state;
    }
};

我简化了过滤器功能，因为三元是多余的。

请注意，此函数正在比较 movementName 道具，因为那是原始代码所具有的，但您为这些项目提供的代码示例使用 name 作为道具。我不确定哪个是正确的，但请确保它们匹配?

【讨论】：