React.js中如何将onChange值逐个存入数组类型state？

问题根因 #

• onChange事件会在每输入一个字符时触发一次，你当前每次触发都往temp数组追加值，自然会把输入过程的所有中间字符都存入数组，而非仅存每次输入的最终结果。
• React状态更新是异步批量执行的，你在同一个函数内先执行setCategory后立刻读取category，拿到的依然是更新前的旧值，就算要追加值数值也不对。

修复方案 #

你要的是每次输入完成后点Next再保存当前输入的最终值，所以把往temp数组追加数据的逻辑从onChange移到Next按钮的点击事件里即可，修改后代码如下：

const [category, setCategory] = useState('');
const [temp, setTemp] = useState([]);

function changeTitle(event) {
    // onChange只负责更新输入框的实时值
    setCategory(event.target.value);
}

function testFinalValue() {
    // 点击Next时再把当前最终输入值存入数组，同时清空输入框准备下一次输入
    setTemp((prevTemp) => [...prevTemp, category]);
    setCategory('');
    // 这里可以加判断，如果temp长度到3就执行后续逻辑
}

<TextField
  value={category}
  label="Name"
  onChange={changeTitle}
/>

<Button
  onClick={testFinalValue}
>
  Next
</Button>

如果不需要点击按钮触发，而是需要判断输入完成（比如失焦、回车提交），也可以把保存逻辑绑定到对应的事件上，逻辑和上面一致。

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