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

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

当前您正在过滤 users 数组，但您应该过滤嵌套的 features 数组。

试试这个

const removedUsers = state.users.map(user => {
  return {...user, features: user.features.filter(feature => feature !== action.payload)};
})

Answer 2

您需要复制 users 上的对象并在 features 上过滤。

举个例子：

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

const payload = "Short";

const newUsers = users.map(user => ({ ...user,
  features: user.features.filter(f => f != payload)
}));

console.log(newUsers);

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

Remove value from an array nested in an object

javascript

arrays

reactjs

redux