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

Question

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

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

<input type="number" value={inputOne} className={styles.codeInput} onChange={e => setInputOne(e.target.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

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

React not triggering re-rendering of form inputs after state is updated via onChange

javascript

state

reactjs

use-state