为什么存储event.target.value中的值时，值的长度比js中实际的长度要小解释一下

Question

为什么存储 event.target.value 中的值时，值的长度比 js 中的实际长度要小，请解释一下。

function App() {
  const [text, settext] = useState("");
  function handler(event) {
    console.log(event.target.value);
    settext(event.target.value);
    //  console.log(text);
  }
  return (
    <div className="App">
      <input type="text" onChange={handler}></input>
    </div>
  );
}

Answer 1

您正在

text

函数中记录

handler

，该函数将在用户输入时调用，但记录的值是当前值，而不是下一个/更新的值。

假设用户输入字符串

"a"

，那么此时

event.target.value

将是用户键入的值，即

"a"

，但是如果您看到

text

的记录值，那么这将是

""

。

  function handler(event) {
    // LOGS USER INPUT VALUE
    console.log(event.target.value);

    // SETTING STATE
    settext(event.target.value);

    // THIS WILL LOG VALUE FROM THE CLOSURE
    console.log(text);
  }

settext

将异步执行，因此直到代码流到达

console.log(text);

时，此时的值是当前值而不是更新后的值。

代码沙盒

如果您想记录

text

的值，那么最好在

callback function

之外进行操作。它会给你更新的值。