通过 onChange 更新状态后，React 不会触发表单输入的重新呈现

Question

我正在尝试构建一个验证码页面。

如果我为每个输入框创建一个单独的状态，然后使用下面的代码，它就可以正常工作。

<input type="number" value={inputOne} className={styles.codeInput} onChange={e => setInputOne(e.target.value}/>

但是，我试图将所有四个输入框的状态合并到一个状态对象中。

现在，当我输入一个数字时，它会移动到下一个输入，但它永远不会呈现该值。在开发工具中，我看到值会像更新一样闪烁，但它仍然保持为“value”而不是“value="1"”。

但是，如果我对我的代码做任何其他事情，例如更改 p 标签的文本，然后它会突然更新并且输入显示正确的值。

我只是想弄清楚我在这里做错了什么。

这是我当前的代码。

import { useState } from 'react'
import styles from '../../styles/SASS/login.module.scss'

export default function Verify(params) {
  const [verifCode, setVerifCode] = useState(['','','','']);

  const inputHandler = (e, index) => {
    // get event target value
    let value = e.target.value;
    // update state
    let newState = verifCode;
    newState[index] = value;
    setVerifCode(newState);
    // move focus to next input
    if (e.target.nextSibling) {
      e.target.nextSibling.focus()
    } else {
      // if at the last input, remove focus
      e.target.blur();
    }
  }

  return (
    <div className={styles.verify}>
      <p className={styles.title}>Verification</p>
      <p className={styles.message}>Please enter the verification code we sent to your email / mobile phone.</p>

      <div className={styles.form}>
        <input type="number" value={verifCode[0]} className={styles.codeInput} onChange={e => inputHandler(e, 0)}/>
        <input type="number" value={verifCode[1]} className={styles.codeInput} onChange={e => inputHandler(e, 1)}/>
        <input type="number" value={verifCode[2]} className={styles.codeInput} onChange={e => inputHandler(e, 2)}/>
        <input type="number" value={verifCode[3]} className={styles.codeInput} onChange={e => inputHandler(e, 3)}/>
      </div>

      <div className={styles.footer}>
        <button>Verify Code</button>
      </div>
    </div>
  )
};

Answer 1

我认为问题出在以下代码

// update state
let newState = verifCode;
newState[index] = value;
setVerifCode(newState);

代码的第一行只是添加了一个指向值verifCode 的指针。 您修改了该数组中的一个元素，但newState 仍然是同一个变量verifCode。即使数组元素发生了本质上的变化，它仍然是相同的变量（相同的引用）。

尝试类似：

// update state
const newState = [...verifCode]; // create a copy of the old verifCode, creating new array 
newState[index] = value; // modify element
setVerifCode(newState); // set the new array to the state