React组件重排状态数组引发两次重渲染问题求助

在React组件中对状态数组内的项进行重排时，遇到了多次重渲染问题，已困扰多日。查阅了多个关于状态数组的同类问题，但均未解决，也不确定问题根源——部分答案指向严格模式，多数指向直接操作状态的问题。

状态数组结构 #

我的状态数组由如下结构的items组成：

[
    {
        "id": 1,
        "order": 2,
        "item_type": "content",
        "content": {
            "id": 2,
            "title": "Content 2",
            "body": "<p>Add content here 2</p>"
        }
    },
    {
        "id": 6,
        "order": 1,
        "width": "50%",
        "item_type": "content",
        "content": {
            "id": 1,
            "title": "Content 1",
            "body": "<p>Add content here 1</p>"
        }
    }
]

状态数组的每个元素通过.map()为子组件提供props。

问题详情 #

传给子组件的删除函数（点击按钮移除项）在设置状态后会引发两次连续重渲染。用console.log()打印状态，第一次重渲染时数组正常，但第二次嵌套的content属性出现异常，因此怀疑与直接操作状态有关。该函数代码如下：

const removeItem = index => {
    // Can't use spread syntax to copy state since we are working with nested objects.
    const items = JSON.parse(JSON.stringify(items));
    // Append delete flag to item, and move it to end of state array.
    const itemToDelete = items.splice(index, 1)[0];
    itemToDelete.delete = true;
    items.push(itemToDelete);
    // Reorder array.
    items.forEach((_, i) => {
       items[i] = { ...items[i], order: i + 1 };
    });
    setDashboardItems(items);
};

• 注释掉forEach循环时，状态重置正常，但添加重排逻辑后就会出现两次重渲染问题。
• 尝试过将逻辑放入setState回调、用Array.reduce()替代等方法，但无法满足重排需求。
• 当阻止元素渲染（将状态设为空数组）时仅会触发一次重渲染，因此可能与子组件有关，但未发现子组件渲染会引发二次重排的原因，若需可提供更多细节。

疑问 #

1. 我的函数是否存在明显错误？
2. 是否有同类问题的解决经验？
3. 可以采取哪些步骤自行排查解决该问题？

内容的提问来源于stack exchange，提问作者lsg93