React17模拟银行应用：表单提交无法正确创建数据库对象

问题根源 #

你在CreateForm组件的handle函数中，用单引号定义URL字符串，导致模板变量${name}、${email}、${password}没有被实际输入值替换，直接以占位符文本传递给后端，最终数据库存入了这些未解析的字符串。

模板字符串必须使用**反引号（`）**才能解析其中的变量，单引号/双引号只会把内容当作普通字符串处理。

修复代码 #

修改CreateForm里的handle函数中URL的定义：

function handle(){
    console.log(name,email,password);
    // 将单引号替换为反引号，启用模板字符串解析
    const url = `account/create/${name}/${email}/${password}`;
    (async () => {
      var res = await fetch(url);
      var data = await res.json();
      console.log(data);
    })();
    props.setShow(false);
}

额外优化提示 #

• 把按钮的type="submit"改为type="button"，避免触发默认表单提交行为导致页面刷新：

  <button type="button" className="btn btn-light" onClick={handle}>Create Account</button>
  

• 可添加基础表单校验（如检查输入是否为空），避免提交无效数据到后端。

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