在React中使用useState修改数组前为何需创建原数组副本？

首先得明确React的状态更新逻辑：它靠引用变化来判断状态是否更新，进而触发组件重新渲染。

先看你给出的两段代码：
第一段能运行，是因为[...todos]创建了原数组的浅拷贝，得到了一个新引用的数组。之后修改数组里的todo对象（这里是直接修改原对象的属性，属于浅修改），最后把新数组传给setTodos，React检测到数组引用变了，就会更新状态并重新渲染组件。

第二段代码没法正常运行，核心问题其实是map回调里没有返回值——map会遍历原数组并生成新数组，但你没返回任何内容，导致新数组全是undefined，状态自然就乱了。另外这段代码里直接修改prevTodos里的todo对象，虽然map生成了新数组，但直接改原对象也不符合React的状态不可变原则，不过最直接的问题是map没返回值。

回到核心问题：为什么必须创建原数组的副本？
有两个关键原因：

• 触发组件重新渲染：如果直接修改原数组（比如直接改todos[xxx].completed，然后把原数组传给setTodos），数组的引用和之前完全一样，React会认为状态根本没变化，不会触发组件重新渲染，界面就不会更新你修改的内容。只有当你传入一个新引用的数组时，React才会判定状态更新，重新渲染组件。
• 遵循状态不可变原则：React的状态设计是不可变的，直接修改原状态会让状态变化变得难以追踪，尤其是在复杂组件、使用useEffect监听状态变化，或者配合Redux这类状态管理工具时，很容易出现莫名其妙的bug。创建副本后再修改，每次状态更新都是一个全新的引用，状态变化的脉络清晰，更容易排查问题。

最后给你一个符合规范的正确写法，既遵循不可变原则，又能正常运行：

const handleToggle = (id) => {
    setTodos(prevTodos => prevTodos.map(todo => {
        if (todo.id === id) {
            // 返回新的todo对象，不修改原对象
            return {...todo, completed: !todo.completed}
        }
        // 未修改的todo直接返回原对象
        return todo
    }))
}

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