Javascript 如何应用过滤器，就像它们被推入阵列一样？（其中这些数组是筛选器对象的一部分）-筛选器：{prop:[]，…}_Javascript

Javascript 如何应用过滤器，就像它们被推入阵列一样？（其中这些数组是筛选器对象的一部分）-筛选器：{prop:[]，…}

javascript

Javascript 如何应用过滤器，就像它们被推入阵列一样？（其中这些数组是筛选器对象的一部分）-筛选器：{prop:[]，…},javascript,Javascript,对于这个问题，JAVASCRIPT知识已经足够了以下是一个应用程序的过滤器，该应用程序具有ngrx状态，用于状态管理从输入字段将payloaditem操作发送到存储。以下是行动 new AddFilter({item: {key: category, value: filter}}) 以上关键是颜色、袖子、合身度、服装类型等类别。。值是应用的过滤器，如if颜色：[黑色、红色、绿色等] 该州的结构如下 state: { [id: string]: Array<string> }

对于这个问题，JAVASCRIPT知识已经足够了

以下是一个应用程序的过滤器，该应用程序具有ngrx状态，用于状态管理

从输入字段将payloaditem操作发送到存储。以下是行动

new AddFilter({item: {key: category, value: filter}})

以上关键是颜色、袖子、合身度、服装类型等类别。。值是应用的过滤器，如if颜色：[黑色、红色、绿色等]

该州的结构如下

state: { [id: string]: Array<string> }

因此，您可以看到，如果应用了一个新字段，它将在状态中创建一个新属性，并将所有值推送到相应的数组中

这就是我尝试过的：但它不起作用：

以下是用于添加过滤器的减速器

myFilters(
    state: { [id: string]: Array<string> } = {},
    action:
      | AddFilter
  ) {
    switch (action.type) {
      case AddFilter.TYPE:
        return {
          ...state,
          [action.item.key]: [...state[action.item.key], action.item.value],
        };

        // reason it fails is due to this statement [...state[action.item.key]

这是纯javascript。你不必担心行动或ngrx商店

建议我在这个街区里该怎么做：

请不要困惑，只关注这个街区

如果字段不可用，则将在添加时创建该字段。例如，最初没有字段，状态为空对象。但是，当用户应用过滤器（例如，让我们说Sleets:short）时，将在状态对象和相应数组中创建一个名为Sleets的新属性。在该数组中，将推送与该字段/道具对应的应用过滤器

这里的想法是保留现有的过滤器，同时在不改变状态的情况下推送新的过滤器。

您只需要在其中的某个位置设置一个| |或三元，以说明首次设置密钥的原因，因此它初始化一个空数组。例如：

[action.item.key]: [...state[action.item.key]||[], action.item.value],

您只需要在其中的某个地方设置一个| |或三元来说明首次设置密钥的原因，因此它会初始化一个空数组。例如：

[action.item.key]: [...state[action.item.key]||[], action.item.value],

这应该可以做到：

  myFilters(

    state: { [id: string]: Array<string> } = {},
    action:
      | AddFilter
  ) {
    switch (action.type) {
      case AddFilter.TYPE:
        const currentValues = state.action.item.key ? state[action.item.key] : []
        return {
          ...state,
          [action.item.key]: [...currentValues, action.item.value],
        };

这应该可以做到：

  myFilters(

    state: { [id: string]: Array<string> } = {},
    action:
      | AddFilter
  ) {
    switch (action.type) {
      case AddFilter.TYPE:
        const currentValues = state.action.item.key ? state[action.item.key] : []
        return {
          ...state,
          [action.item.key]: [...currentValues, action.item.value],
        };

我猜想，当表达式…state[action.item.key]试图在不存在的字段上执行扩展运算符时，您的代码失败了

您有两种选择：

您可以将存储中所有可能的字段初始化为空数组，使[action.item.key]：[…state[action.item.key]、action.item.value]表达式即使为空也能正确解析。在我看来，这是你应该做的事情。因为过滤器仍然存在，即使它们还没有被使用。此外，您不希望必须管理从当前状态中删除属性，并在属性重复变为空/满时重新初始化它们，这似乎是您当前的问题

您可以在return语句之前添加一个check来生成属性值的结果，如下所示

我猜想，当表达式…state[action.item.key]试图在不存在的字段上执行扩展运算符时，您的代码失败了

您有两种选择：

您可以在return语句之前添加一个check来生成属性值的结果，如下所示

  myFilters(

    state: { [id: string]: Array<string> } = {},
    action:
      | AddFilter
  ) {
    switch (action.type) {
      case AddFilter.TYPE:
        const currentValues = state.action.item.key ? state[action.item.key] : []
        return {
          ...state,
          [action.item.key]: [...currentValues, action.item.value],
        };

const newPropertyValue = state[action.item.key] ? [...state[action.item.key], action.item.value] : [action.item.value]

return {
  ...state,
  [action.item.key]: newPropertyValue
}