React使用useState Hook时字符串截取状态不更新如何解决

这个问题和字符串类型状态是否需要展开运算符无关，核心是事件处理器存在闭包陈旧值问题：
你绑定的handler是组件首次渲染时生成的，函数内捕获的input永远是初始状态的空字符串''。每次按下退格键时，实际执行的是''.slice(0, -1)，返回值还是空字符串，React对比新旧状态发现值完全相等，会直接跳过更新流程，所以看起来状态始终没有变化。

字符串是JS原始值类型，本身是不可变的，slice操作返回的就是全新的字符串，只要传入setInput的新值和旧值不同，就会正常触发更新，不需要像对象、数组那样手动做展开拷贝。

1. 函数式更新（最推荐） #

直接给setInput传入更新函数，该函数的入参永远是React维护的最新状态值，完全不依赖渲染闭包捕获的旧值，不需要调整其他依赖：

const handler = (e: KeyboardEvent) => {
  if (e.key === 'Backspace') {
    setInput(prevInput => prevInput.slice(0, -1));
  }
};

2. 保证事件处理器拿到最新闭包 #

如果你用useCallback缓存了事件处理器，记得把input加入依赖数组，保证input变化时能生成新的handler，绑定到组件上的处理器始终能拿到最新的状态值：

const handler = useCallback((e: KeyboardEvent) => {
  if (e.key === 'Backspace') {
    const slicedString = input.slice(0, -1);
    setInput(slicedString);
  }
}, [input]); // 必须将input加入依赖

注意用这个方案时，要确认自定义组件MyComponent会把最新的onKeyDown回调透传至内部可聚焦的DOM节点上（若绑定事件的节点不是原生输入框，还需要给节点加tabIndex={0}保证节点可聚焦，否则键盘事件不会触发）。

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