Question

在这里，我在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.

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
      ];
    });
  };

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

1 个答案: