React onChange事件触发时useState状态更新缺失最后一个字符如何解决

问题原因 #

你的代码存在两个核心问题：

1. React 中 useState 返回的更新函数是异步批量执行的，本身并不返回 Promise 对象，你给 setValues 加 await 不会等待状态更新完成，后续读取的 values 始终是本次渲染周期的旧值，所以出现取值始终落后一个输入字符的问题。
2. 你从 e.target 解构得到的 value 本身就是输入的字符串值，原有代码里写的 CallAPIWithSearchText(value.text) 会取到 undefined，属于语法错误。

修复方案1：直接使用当前拿到的输入值调用接口 #

你已经在事件回调里通过 e.target.value 拿到了最新的输入内容，不需要等待状态更新完成再读state，直接用这个值调用接口即可，修改后代码如下：

const [values, setValues] = useState({
    text: ''
});

<Input 
    name="text" 
    onChange={(e) => handleChange(e)} 
    type="text" 
    className="form-control"
></Input>

const handleChange = e => {
    const {name, value} = e.target;
    // 更新状态
    setValues({
        ...values,
        [name]: value
    });
    // 直接用当前拿到的最新value调用接口
    CallAPIWithSearchText(value);
}

修复方案2：使用useEffect监听状态变化触发接口调用 #

如果你的调用逻辑依赖更新后的完整state对象，可以用useEffect监听对应状态的变化，状态更新完成后会自动触发回调：

const [values, setValues] = useState({
    text: ''
});

// 监听values.text的变化，更新后自动调用接口
useEffect(() => {
    CallAPIWithSearchText(values.text);
}, [values.text])

<Input 
    name="text" 
    onChange={(e) => handleChange(e)} 
    type="text" 
    className="form-control"
></Input>

const handleChange = e => {
    const {name, value} = e.target;
    setValues({
        ...values,
        [name]: value
    });
}

额外优化建议 #

如果输入频率高，建议给接口调用加防抖处理，避免短时间触发大量无效请求，示例防抖逻辑：

// 防抖函数，300ms内无新输入才调用接口
const debounce = (func, delay = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

const debouncedCallAPI = useCallback(debounce(CallAPIWithSearchText), [])

useEffect(() => {
    debouncedCallAPI(values.text);
}, [values.text, debouncedCallAPI])

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