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