在这里,我在React挂钩中有一个状态,该状态包含多个对象的数组。每个对象都有一个名为value的键,该键存储排序值(上一个对象的+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.
答案 0 :(得分: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
];
});
};