Question

因此，我有一个对象数组，需要按特定顺序显示并进行组织。该功能已经存在并且可以正常工作，但是我无法使其正确呈现。

我基本上有：

const [objects, setObjects] = useState([]);

return (
  <>
    {objects.map(object =>
      <Component
        object={object}
      />
    )}
  </>
);

现在我显然已经用数据填充了这个数组，并且可以正常显示，但是当我尝试重组数组时，UI上似乎没有任何改变。

我正在通过拼接方式进行重组。我确定了要移动的对象，将其拼接并拼接回另一个索引（实际上不确定是否需要此临时变量）：

function reorganize(sourceIndex, targetIndex){
  const object = objects[sourceIndex];
  const temp = objects;
  temp.splice(sourceIndex, 1);
  temp.splice(targetIndex, 0, object);
  setObjects(temp);
}

当我在对象上使用console.log（）时，可以看到顺序已更改。但是正如我所说，UI上没有任何变化。对如何进行这项工作有任何想法吗？

Answer 1

在重组功能中对此进行更改

const temp = [...objects];

别忘了它是一个数组。

Answer 2

您正在改变状态-temp不是对象的副本，但仍在直接引用它。在React中，您不应该直接改变状态-正确的代码应该是temp = [...objects]。另外请注意，这只会创建一个浅表副本-如果要处理深度嵌套的数组/对象，请使用外部存储库，例如Lodash的cloneDeep。

根据顺序渲染映射数组

2 个答案: