如何在 redux 中更新对象内部的数组

Question

我有一个数组我现在正在为 redux 编写代码。

const initialState = [{ id: '1', title: '', description: '' }];

我想像这样更新那个数组

[{ id: '1', title: '', description: '' },{ id: '2', title: '', description: '' }];

复制后我想将 id 的副本更新为“2”

这是我试过的

    case COPY_QUESTION: {
      const copyQuestion = state.find(question => question.id === action.payload)
      copyQuestion?.id = (state.length + 1).toString()
      return [...state, copyQuestion];
    }

它对我不起作用。如果我尝试更改 id，0 索引也会同时更改。像这样

[{ id: '2', title: '', description: '' },{ id: '2', title: '', description: '' }];

非常感谢您的帮助，感谢您阅读这个问题。

Answer 1

像这样的东西应该可以工作：

const initialState = [{ id: '1', title: '', description: '' }];

const copyInitialState = [...initialState]

copyInitialState.push({ id: parseInt(copyInitialState[copyInitialState.length - 1].id, 10) + 1, title: '', description: '' })

//setState

copyInitialState 则等于：

[
 {
  id:"1",
  title:"",
  description:""
 },
 {
  id:2,
  title:"",
  description:""
 }
]

Answer 2

JavaScript 通过引用处理对象，因此仅“查找”returns 已存在对象在内存中的地址，然后对其进行操作。

您必须先克隆您的对象，例如使用 the spread operator（不适用于深度克隆）：

const originalQuestion = state.find(question => question.id === action.payload)
const copyQuestion = { ...originalQuestion }

查看 at this SO question 了解更多背景和可能性。

如何在 redux 中更新对象内部的数组

How do I update array inside object in redux

javascript

reactjs

react-redux