onChange 函数不捕获最后一个字符答案

【问题标题】：onChange function doesn't capture last characteronChange 函数不捕获最后一个字符
【发布时间】：2021-10-30 07:02:12
【问题描述】：

import "./styles.css";

import React, {useState} from 'react';

function App() {
  const [name, SetName] = useState('')

const changeHandler = (e) => {
  SetName(e.target.value)
  console.log(name)
}

  return (
    <main>
      <input
      onChange={changeHandler}
      value={name}
       />
    </main>
  );
}

export default App;

我正在尝试从输入框中显示名称，但最后一个字符不可见。我尝试用 onKeyUp 替换 onChange 但结果是一样的。例如，如果我输入 John 作为输入，控制台只输出 Joh 并跳过 n。为什么会这样？

REPL 链接：https://replit.com/join/lqcehsaifp-gouravthakur

截图让你更好地理解问题

【问题讨论】：

stackoverflow.com/questions/45622879/… 有帮助吗

标签： javascript reactjs

【解决方案1】：

它工作正常，但你必须在你的函数结束后控制台.log；实际上钩子在你的函数结束后工作。

【讨论】：

【解决方案2】：

Setstate 函数异步工作，因此在您的更改处理函数中，您的 console.log 在 setstate 函数之前执行。如果您在 return 语句上方使用 console.log 名称，您可以看到它的变化非常好

【讨论】：