React 18.1表单提交时State为空的问题求助

你的代码里state其实已经正常更新了，问题出在alert的用法上：
alert函数仅支持接收一个参数，你写的alert('The submitted QR code is: ', qr)会忽略第二个参数qr，所以弹窗里只会显示前半段文本，看起来像是qr为空字符串。

解决办法 #

1. 修正alert的调用方式 #

用模板字符串把文本和qr拼接成单个参数：

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

2. 改用console.log调试（更推荐） #

如果是调试需求，console.log支持多参数输出，能更清晰地查看qr的值：

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

你可以测试一下，不管用哪种方式，都能看到提交时qr已经是输入框里的内容了，之前的“state未就绪”只是alert用法错误造成的假象。

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