Javascript 在react redux reducer getting map（）中更新数组中的对象不是函数

我有一个相当复杂/嵌套的redux存储，如下所示：

{
  object1
  {
    array:
    [
      object[1]: {
        id: 1,
        replace: ""
      }
      object[2]: {
        id: 2
        replace: ""
      }
      object[3]: {
        id: 3,
        replace: ""
      }
    ]
  }
}

分派操作后，我需要根据ID将该操作插入到对象[]之一。我当前正在使用以下脚本在reducer中更新替换。但是，由于object2:{}的花括号，这会将数组更改为对象

case UPDATE:
  return {
    ...state,
    object1: {
      ...state.object1,
      array: {
        ...state.object1.array,
        [action.id]: {
          ...state.object1.array[action.id],
          replace: action.result
        }
      }
    }
  };

我的渲染将在此之后中断，因为object2.map在更改为object后不再是函数。如何在不将其转换为对象的情况下解决此问题

以下操作将失败，出现语法错误：

case UPDATE:
  return {
    ...state,
    object1: {
      ...state.object1,
      array: [
        ...state.object1.array,
        [action.id]: {
          ...state.object1.array[action.id],
          replace: action.result
        }
      ]
    }
  };

---

您不能直接指定要使用扩展语法修改的索引，您需要首先找到索引并按如下方式进行操作

case UPDATE:
  var idx = state.object1.object2.findIndex(obj => obj.id === action.id)
  return {
    ...state,
    object1: {
      ...state.object1,
      object2: [
        ...state.object1.object2.slice(0, idx),
        {
            ...state.object1.object2[idx],
            replace: action.result 
        }
        ...state.object1.object2.slice(idx + 1)
      ]
    }
  };

或者，您可以使用immutability helper包。有关如何操作的示例，请参见此答案

---

您不能直接指定要使用扩展语法修改的索引，您需要先找到索引，然后按如下操作

case UPDATE:
  var idx = state.object1.object2.findIndex(obj => obj.id === action.id)
  return {
    ...state,
    object1: {
      ...state.object1,
      object2: [
        ...state.object1.object2.slice(0, idx),
        {
            ...state.object1.object2[idx],
            replace: action.result 
        }
        ...state.object1.object2.slice(idx + 1)
      ]
    }
  };

或者，您可以使用immutability helper包。有关如何操作的示例，请参见此答案

---

下面是使用不变性帮助程序包的代码

case UPDATE:
  return update(state, {
    object1: {
      array: {
        [action.id]: {
          replace: {
            $set: action.result
          },
        },
      },
    }
  });

---

下面是使用immutability helper包的代码

case UPDATE:
  return update(state, {
    object1: {
      array: {
        [action.id]: {
          replace: {
            $set: action.result
          },
        },
      },
    }
  });

---

“你可以去图书馆看看。它的目的是以一种非常简洁的方式帮助更新复杂的嵌套数据结构，它的创建考虑了redux的使用

在您的情况下，您可以这样写：

import { set } from 'immutadot'

...

  case UPDATE:
    return set(state, 'object1.arrary[' + id + '].replace', action.result)
    // or with templated string
    return set(state, `object1.arrary[${ id }].replace`, action.result)

...

---

它依靠木头下面的lodash，所以你可以使用lodash的所有功能。

'你可以查看图书馆。它的目的是以一种非常简洁的方式帮助更新复杂的嵌套数据结构，它的创建考虑了redux的使用

在您的情况下，您可以这样写：

import { set } from 'immutadot'

...

  case UPDATE:
    return set(state, 'object1.arrary[' + id + '].replace', action.result)
    // or with templated string
    return set(state, `object1.arrary[${ id }].replace`, action.result)

...

---

它依赖于林下的lodash，因此你可以使用lodash的所有功能。

什么是数组[1]、数组[2]、数组[3]，或者你的意思是说其中的3个对象object2@ShubhamKhatri是的，我错了。更改了上面的问题什么是数组[1]、数组[2]、数组[3]，或者您的意思是说其中的3个对象object2@ShubhamKhatri是的，我错了。更改了上面的问题检查此答案谢谢！使用了不变性助手，因为它提供了更好的性能。下面更新了代码。没问题。但是，它已经作为我在回答中添加的问题的答案出现了检查此回答谢谢！使用了不变性助手，因为它提供了更好的性能。下面更新了代码。没问题。然而，它已经作为我在回答中添加的问题的答案出现了。这看起来很整洁！它是：-）唯一的缺点是当您尝试将它与flow或typescript之类的类型系统一起使用时。你立即失去了类型…这看起来很整洁！它是：-）唯一的缺点是当您尝试将它与flow或typescript之类的类型系统一起使用时。你立刻失去了类型。。。