ReactJS报Form submission canceled错误无法显示加载片段如何解决

存在的两个核心问题 #

• 1. 表单默认提交行为未阻止
     你代码里的<button>放在<form>标签内，默认type为submit，点击后会触发表单默认提交动作。而你在点击回调里直接将redeemVoucherForm设为false，form元素被立即从DOM中卸载，浏览器处理提交请求时找不到对应表单节点，就抛出了你看到的报错。
• 2. isLoading属性拼写错误
     你在state中定义的加载状态为isLoading（L大写），但在render的三元判断里写的是this.state.isloading（l小写），拼写不匹配导致加载状态更新后，加载片段始终无法渲染。

修复方案 #

第一步：处理表单默认提交行为 #

两种方案二选一即可：

• 方案1：给button添加type属性指定为普通按钮
  把按钮代码修改为：

<button 
  type="button"
  className={styles.avail_subs} 
  onClick={this.handleSubscription} 
  disabled={!this.state.voucherNumber || !this.state.pin} 
>
  Avail Subscription
</button>

• 方案2：在点击回调里阻止默认事件
  修改handleSubscription方法：

handleSubscription=(e)=>{
  e.preventDefault()
  this.setState({
    isLoading:true,
    redeemVoucherForm:false,
    error:false,
    verified:false
  })
  // 后续你的API请求逻辑也可以放在这里
}

第二步：修正isLoading拼写 #

把render里的判断语句this.state.isloading ?修改为this.state.isLoading ?

补充优化建议 #

你可以把API请求逻辑放在handleSubscription里，请求完成后再更新isLoading、error、verified这几个状态来切换页面展示。

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