如何在React状态下动态更改对象的a值

Question

这里我在React钩子中有一个状态，它有一个多个对象的数组。每个对象都有一个名为值的关键字，该关键字存储排序值(前一个对象的+1(：

const [state, setState] = useState([
{
value="item1",
data="..."
},
{
value="item2",
data="..."
},
{
value="item3",
data="..."
},
{............
])

现在我的问题是，如果在任何以前的对象之间(例如：在索引0&1之间(或末尾添加了任何新对象，或者将其中一个向上/向下移动，我如何动态设置value键的值

之前，我尝试比较索引值，并尝试使用onChange方法进行设置，但遇到了以下问题：

//qtNumber Handles the numbering, problem is setting them in state
const SetNumbering = (index, qtNumber) => {
setState(prevQuestion => {
return [
...prevQuestion.slice(0, CurrentSection),
{
...prevQuestion[CurrentSection],
value: "item" + qtNumber            
},
...prevQuestion.slice(CurrentSection + 1)
];
});
};

Unhandled Rejection (Error): Too many re-renders. React limits the number of renders to prevent an infinite loop.

Answer 1

要回答您的问题，您可以将新元素之后的所有元素映射到具有更新的value字段的新对象。我会说，这看起来确实有点奇怪(可能表明你想在这里做一些不同的事情，这有点浪费(。然而，这应该符合您的要求：

//qtNumber Handles the numbering, problem is setting them in state
const SetNumbering = (index, qtNumber) => {
setState(prevQuestion => {
const before = prevQuestion.slice(0, CurrentSection)
const after = prevQuestion.slice(CurrentSection + 1).map((q, i) => ({
value: `item${i+qtNumber+1}`,
data: q.data
}))
return [
...before
{
...prevQuestion[CurrentSection],
value: "item" + qtNumber            
},
...after
];
});
};