React中对数组执行pop操作时state未正常更新问题

• React 对数组、对象这类引用类型的 state 默认做引用相等检查：如果更新后返回的 state 和之前的 state 内存引用地址一致，React 会判定状态没有发生变化，直接跳过组件重渲染流程。
• 代码中使用的Array.pop()是原地修改方法，会直接改动setInput回调里拿到的prev（也就是当前 state 绑定的原数组）的内存内容，最后你又把同一个prev引用返回给了setInput，React 对比发现引用地址没有变化，自然不会触发更新。
• 控制台能打印出修改后的数组，是因为你直接篡改了原 state 指向的内存数据，属于违反 state 不可变原则的“脏修改”，不代表 React 认可了这次状态变更，React Developer Tools 和页面渲染都不会响应这类非法修改。

核心原则：更新引用类型 state 时，永远返回一个全新的引用，不要直接修改原 state 对应的对象/数组。
两种常用的正确实现：

1. 用非原地修改的数组方法直接生成新数组，代码最简洁：

const removeLastElementFromArray = () => {
    setInput(prev => prev.slice(0, -1))
}

slice(0, -1)会返回截取到倒数第二位元素的全新数组，不会改动原数组，完全符合不可变更新要求。

2. 如果需要拿到被移除的最后一个元素做后续逻辑，可以先创建原数组的浅拷贝，再操作拷贝后的数组返回：

const removeLastElementFromArray = () => {
    setInput(prev => {
        const newArr = [...prev] // 通过展开运算符生成原数组的浅拷贝
        const removedItem = newArr.pop() // 操作拷贝对象，不会影响原state
        // 此处可按需使用removedItem编写自定义逻辑
        return newArr
    })
}

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