从嵌套在也嵌套在数组中的对象中的数组中删除值

Question

我的代码有问题。我目前有一些数据，如下所示；

 users: [
    {
      name: 'bolu',
      features: ['Tall'],
    },
    {
      name: 'cam',
      features: ['Bearded', 'Short'],
    },
  ],
};

我想做的是 delete/remove 单个功能 - 例如，如果我将 'short' 传递到我的 redux 操作中。我希望将其（'Short' 文本）从要素数组中删除。我目前以这种方式设置我的 redux 操作：

export interface UsersDataState {
  name: string,
  features: Array<string>,
}

export interface UsersState {
  users: UsersDataState[];
}

const initialState: UsersState = {
  users: [],
};

    export const usersSlice = createSlice({
      name: 'users',
      initialState,
      reducers: {
        removeUser: (state, action: PayloadAction<string>) => {
          const removedUsers = state.users.filter((user) => user.features.indexOf(action.payload));
          state.users = removedUsers;
        },
       },
   });

所以这里我传入的是in的值（action.payload是传入的值）。调度此操作后，我只想删除从 features 数组传入的单词。我希望现在更清楚了。

由于某种原因这不起作用，我无法弄清楚原因。如有任何帮助，我们将不胜感激，谢谢。

Answer 1

您的代码与您的状态结构不匹配。将 traits 替换为 users，将 values 替换为 features。
看起来这是 reducer 的一部分，而不是动作（它是一个对象，而不是一个函数）。
你应该从减速器返回一个新状态。
根据您的更新，函数应该被调用 removeFeature。

所以，我已经根据我对 Redux 的记忆更正了您的一些代码。注意：人为的例子。

// State
const state={users:[{name:"joe",features:["Mean","Short"]},{name:"bolu",features:["Tall"]},{name:"cam",features:["Bearded","Short"]}]};

// The reducer accepts a state, and an action
function reducer(state, action) {

  // We destructure the type, and payload, from the action object
  const { type, payload } = action;

  // Depending on the type...
  switch (type) {

    case 'removeFeature': {
      
      // `map` over the users (we return a new state array)
      return state.users.map(user => {
        
        // `filter` out the feature elements
        // that match the payload
        const updatedFeatures = user.features.filter(feature => {
          return feature !== payload;
        });
        
        // Return a new updated object
        return { ...user, features: updatedFeatures };
      
      });
    
    }

    default: return state;

  }

}

const updatedState = reducer(state, {
  type: 'removeFeature',
  payload: 'Short'
});

console.log(updatedState);

从嵌套在也嵌套在数组中的对象中的数组中删除值

Remove value from an array nested in an object also nested in an array

javascript

arrays

data-structures

reactjs

redux