在 react 中更新嵌套于对象属性中的数组时，必须确保新值仍是数组而非函数；直接在 `setarr` 的回调中执行数组拷贝与元素交换，并将结果赋给对应属性即可避免 `map is not a function` 等类型错误。
在 React 函数组件中操作状态（state）时，不可直接修改原数组或原对象，而应始终返回一个全新的引用。你遇到的 TypeError: arr.container.map is not a function 错误，根本原因在于：你在 setArr 回调中将 container 属性错误地设为了一个函数（() => { ... }），而非数组本身。由于后续渲染时 arr.container 变成了函数，调用 .map() 就自然报错。
正确做法是：在 setArr 的函数式更新回调中完成所有逻辑处理，并直接返回新数组作为 container 的值。以下是修复后的核心代码：
⚠️ 关键注意事项：
- 不要在状态对象中存函数：container: () => [...] 会覆盖原有数组，破坏数据结构一致性；
- 边界检查必不可少：index - 1 可能为 -1，需校验 index > 0，否则访问 copy[-1] 得 undefined，导致静默错误或异常；
- 若需支持任意两索引交换（不限相邻），可扩展为接收 fromIndex 和 toIndex 参数，并做双向越界防护；
- 对于深层嵌套或复杂对象，推荐使用 Immer 简化不可变更新逻辑。
总结：React 状态更新的核心原则是「纯函数式 + 不可变更新」。只要确保每次 setState 返回的是结构正确的全新对象/数组，就能规避绝大多数类型相关渲染错误。
