Question

大家好，大家好！我正在开发react-redux应用程序，并且试图在我的reducer中的深层嵌套结构上更新属性。数据结构如下，我想更新text属性：

state = {
  assessment: {
    requirements: [
      questions: [
        {
          text
        }
      ] 
    ]
  }
}

所以我尝试了以下方法：

// reducer code...
return {
  ...state,
  [assessmentId]: {
    ...state[assessmentId],
    requirements: [
      ...state[assessmentId].requirements, 
      [requirementId]: [
        ...state[assessmentId].requirements[requirementsId],
        questions: [
          ...state[assessmentId].requirements[requirementsId].questions,
          [questionId]: {
            text: action.payload.response.text
          },
        ],
      ] ,
    ],
  },
};

这是比实际代码更多的伪代码，以消除复杂性。我没有看到redux开发工具中的任何更改，所以我想知道我是否在获取嵌套对象和数组元素的方式上犯了一个错误。

我也很好奇在这里使用联合减速器。我问了一位同事，他们建议使用该方法，但是我不确定您在这里将采用哪种方法。与往常一样，我们将提供任何帮助。

Answer 1

我建议沉浸在减速器的深层状态变化中。它给您的捆绑包增加了一点重量，并且使用散布运算符可以使您获得更好的性能，但是如果您能够接受的话，它将使您的代码更易于阅读和编写。

import produce from "immer";

// reducer code...
return produce(state, draft => {
  draft[assessmentId].requirements[requirementsId].questions[questionsIndex].text = action.payload.response.text;
});

我想说您的问题源于questions是一个数组，要保持直线状态要比基于对象的状态花费更多的工作。

实际上，您似乎正在尝试设置问题值，就好像questions是一个对象一样。也许您只需要删除[questionId]语法，例如

questions: [
  ...state[assessmentId].requirements[requirementsId].questions,
  { text: action.payload.response.text },
],

这会将文本对象设置为数组末尾的新项。

根据需要执行的操作（即数组中已存在的内容以及是否要添加或更新），您需要阅读以下内容：

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#inserting-and-removing-items-in-arrays

https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns#updating-an-item-in-an-array

如何更新数组内的深层嵌套对象？

1 个答案: