React中onKeyDown函数内修改state为何需第二次按键才生效？

可能的原因 #

• 按键判断的兼容性问题：你使用event.keyCode || event.charCode来识别删除键，但keyCode已被浏览器标准废弃，部分环境下第一次按键可能出现取值异常，导致条件不触发setMyState(2)。
• 受控组件逻辑不完整：你的输入框是受控组件（绑定了value={myInputValue}），但未添加onChange事件处理。按下删除键时，浏览器默认行为会临时修改输入框显示值，但React会强制将其还原为myInputValue的旧值，这个过程可能干扰状态更新的渲染时机，导致第一次状态变更未及时显示。
• 状态更新的闭包干扰：如果handleTextDel被缓存（比如用了useCallback但未正确设置依赖），可能引用了旧的组件上下文，第一次调用时无法正确触发状态更新。

解决步骤 #

1. 替换标准的按键判断方式：用event.key替代废弃的keyCode，兼容性更可靠：

   const handleTextDel = (event) => {
       if (event.key === 'Backspace' || event.key === 'Delete') {
           setMyState(2);
       }
   };
   

2. 完善受控组件的更新逻辑：给输入框添加onChange事件，确保myInputValue能同步用户输入，避免React强制还原输入值的干扰：

   <input 
       type="text" 
       value={myInputValue} 
       onChange={(e) => setMyInputValue(e.target.value)}
       onKeyDown={handleTextDel}
   />
   

3. 检查状态缓存的依赖设置：如果handleTextDel使用了useCallback，确保依赖数组包含setMyState（useState返回的更新函数是稳定的，可安全加入依赖）：

   const handleTextDel = useCallback((event) => {
       if (event.key === 'Backspace' || event.key === 'Delete') {
           setMyState(2);
       }
   }, [setMyState]);
   

4. 调试验证执行流程：在handleTextDel中添加日志，确认第一次按下删除键时函数是否执行、条件是否满足：

   const handleTextDel = (event) => {
       console.log('按键触发', event.key, event.keyCode);
       if (event.key === 'Backspace' || event.key === 'Delete') {
           console.log('执行setMyState');
           setMyState(2);
       }
   };
   

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