javascript - 提交表单时 react 状态为空

Question

我对 react 并不陌生，但出于某种奇怪的原因，我遇到了一个正在测试的快速示例，我注意到状态为空字符串。好像它没有更新。我正在使用 React 18.1，这里是一个 stack blitz 实例来实时查看代码(沙箱)，click me .

完整代码:

import React, { useState } from 'react';

export default function App() {
  const [qr, setQr] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('The submitted QR code is: ', qr);
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} value={qr} />
    </form>
  );
}

谁能解释一下为什么提交表单时状态没有准备好？你是如何解决这个问题的？

我实际上正在处理一个更大的项目，当我遇到这个错误时，我决定在沙盒中的一个更小的快速示例中演示它。

谢谢你👍

Answer 1

问题在您的警报中。该值实际上是在发生变化时更新的，但 alert 只接受一个参数，而您要传递两个参数。

相反，您可以像这样连接字符串以产生所需的结果:

alert(`The submitted QR code is: ${qr}`);