React封装Input组件后输入框值最后一位无法存入localStorage问题

问题原因 #

问题出在React的useState更新机制上——setInput是异步操作，调用它之后，组件不会立刻更新input变量的取值。你在handleChange里先调用setInput(e.target.value)，紧接着就用input去存localStorage，这时候input还是更新前的旧值，自然会少最后一次输入的字符。

举个例子：输入"abc"的过程中

• 输入"a"时，input初始为空，setInput("a")后立刻存input（空值），localStorage里是空
• 输入"b"时，input是"a"，存进去的是"a"
• 输入"c"时，input是"b"，存进去的是"b"
  最终就出现了丢失最后一位的情况。

解决方法 #

方法一：直接使用事件对象的最新值存入 #

不用依赖state的更新，直接拿e.target.value存localStorage：

const handleChange = (e) => {
  const newValue = e.target.value;
  setInput(newValue);
  localStorage.setItem(name, newValue);
}

方法二：用useEffect监听state变化后存入 #

借助useEffect，等input状态真正更新完成后再执行localStorage存储操作：

import { useState, useEffect } from 'react';

function Input ({name, type, id}) {
const [input, setInput] = useState("");

const handleChange = (e) => {
  setInput(e.target.value);
}

useEffect(() => {
  localStorage.setItem(name, input);
}, [input, name]) // 当input或name变化时执行存储

return <input type={type} id={id} required onChange={handleChange} value={input} />
}

另外补充一个小细节：你的Input组件里的input标签没有绑定value，会变成非受控组件，建议加上value={input}，让它成为受控组件，保证输入框值和state完全同步。

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