React通过onChange更新数组状态后验证码输入框未触发重渲染问题

问题根因 #

你遇到的渲染异常是因为React状态更新采用浅比较逻辑：
你在修改数组状态时，直接复用了原数组的引用，没有生成新的数组实例。React对比状态前后的引用发现没有变化，就会判定状态未更新，跳过组件重渲染。只有其他修改触发组件重渲染时，已经被你直接修改的原数组值才会同步展示到页面上。
出问题的代码行：
let newState = verifCode;
这行代码只是把原状态数组的引用赋值给了newState，后续修改newState本质是直接修改原状态数组，调用setVerifCode传入同一个引用不会触发重渲染。

修复方案 #

只需要修改状态更新逻辑，先创建原数组的副本再修改即可，调整后的inputHandler代码如下：

const inputHandler = (e, index) => {
  // 只取输入的最后1位，避免用户输入多位数异常
  let value = e.target.value.slice(-1);
  // 用展开运算符创建原数组的副本，生成新的引用
  let newState = [...verifCode];
  newState[index] = value;
  setVerifCode(newState);
  // 移动焦点逻辑
  if (e.target.nextElementSibling) {
    e.target.nextElementSibling.focus()
  } else {
    e.target.blur();
  }
}

额外优化建议：给每个<input>添加maxLength={1}属性，从输入层面限制最多输入1位数字，体验更友好。

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