用于设置新状态的Spreading array

Question

我在React.JS工作，并试图通过传播对象数组和改变其中一个值来设置一个新的状态。我有一个数组的对象与键和另一个对象作为值。这样的:

[
{"first": {
"backlog":[...]
}
}, 
{"second": {
"backlog":[...]
}
},
{"third": {
"backlog":[...]
}
}
]

我还有变量selected，其中一个对象的键作为值。所以我想把我的整个数组作为一个新的状态展开，但是稍微改变一下对象的backlog。其对象的键保存在selected变量中。问题是，我够不到我需要的东西。我试着这样做，但我明白我错了:

setProjects((prevProjects) => 
([...prevProjects, [selected]: {...prevProjects[selected], backlog: [...prevProjects[selected].backlog, NewObj ]}])
)

有可能实现吗?如果是，怎么做?

Answer 1

您必须在外部数组中找到带有键的对象的索引，然后在映射状态时更新该索引。

const index = projects.findIndex(obj => obj[selected]);
setProjects(
projects.map((project, i) => (
i === index
? { backlog: [...project.backlog, NewObj] }
: project
))
);

但是请考虑是否可以使用更简单的数据结构来使操作更容易。

const [projects, setProjects] = useState({
first: [...], // first backlog
second: [...], // second backlog
// etc
});

然后你可以用

更新

setProjects({
...projects,
[selected]: [...projects[selected], NewObj]
});

---

你不需要使用回调表单(setProjects((prevProjects) =>)，除非你之前已经同步更新了projects状态和组件还没有重新呈现。有时这是必要的，但通常不是。