Console.log 错误：响应表单“表单提交已取消，因为表单未连接”，即使它正在提交

Question

我不明白为什么我的控制台会出现这个错误，即使表单正在将数据提交到列表中。

表单提交取消，因为表单未连接

我创建了一个 React 应用程序，其中有一个包含数据的框列表，然后单击“添加”按钮。 添加表单将另一个带有数据的框添加到列表中。 我在网上寻找建议，但找不到任何可以帮助我的东西。 我是忽略错误还是修复它？

这是我的代码：

import React, { Component } from 'react';
import FormField from './FormFieldBox';
import { CountryDropdown } from 'react-country-region-selector';

function validate(name, isin, country) {
  // true means invalid, so our conditions got reversed
  return {
    name: name.length === 0,
    isin: isin.length === 0,
    country: country === ""
  };
}

export default class PopupForm extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      isin: '',
      country: ''
    }
  }

  selectCountry = (e) => {
    this.setState({ country: e });
  }

  updateInput = (e) =>{
    this.setState({[e.target.name]: e.target.value})
  }

  closePopupSubmit = (e) => {
    if (!this.canBeSubmitted()) {
      e.preventDefault();
    }
    let security = {     //1.gather security data from form submit
      name: this.state.name,
      isin: this.state.isin,
      country: this.state.country
     } 
     this.props.submitPopup(security); //2.closePopup function, add security data
  }
  canBeSubmitted() {
    const errors = validate(this.state.name, this.state.isin, this.state.country);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return !isDisabled;
  }

  cancelPopupSubmit = (e) => {
    e.preventDefault();
     this.props.cancelPopup();
  }

  render() {
    const errors = validate(this.state.name, this.state.isin, this.state.country);
    const isDisabled = Object.keys(errors).some(x => errors[x]);
    return (
      <div className='popup'>  
      <div className='popup-inner'>  
      <form onSubmit={this.closePopupSubmit} className="add-form">
        <h2>Add Security</h2>
        <div className="form-input">
        <FormField onChange={this.updateInput} className={errors.name ? "input error" : "input"} label="Name" type="text" name="name" value={this.state.name} />
        <FormField onChange={this.updateInput} className={errors.isin ? "input error" : "input"} label="ISIN" type="text" name="isin" value={this.state.isin} />
        <div className="field">
          <label className="label">Country</label>
          <div className="control">
            <CountryDropdown onChange={this.selectCountry} className={errors.country ? "input error" : "input"} value={this.state.country} />
            {Boolean(this.state.country !== "") || (
            <div className="err-msg">
              Please select the country
            </div>
            )}
          </div>
        </div>
        </div>
        <div className="buttons-box">
          <button type="button" onClick={this.cancelPopupSubmit} className="button">Cancel</button>
          <button type="submit" className="button" disabled={isDisabled}>Submit</button>
        </div>
      </form>
      </div>  
      </div>  
    )
  }
}

Answer 1

我相信当您将e.preventDefault()包装在表单提交的条件中时，这是问题的根本原因； 因为它阻止了默认操作——在这种情况下，默认操作是阻止页面刷新——触发（这是我们在使用 React 时一直想要的！）。

这就是说，我已经重构你的代码要少WET（W仪式êverything牛逼WICE），并提出您的可重复使用的组件，更灵活。 你可以阅读一些详细的注释来帮助理解流程和我的决策。 由于这是为了求职面试，如果您真的想给人留下深刻印象，请开始为您的组件编写测试——它们不仅会工作，而且还会得到证明它们工作的测试的支持（或者，如果代码库发生变化，则会中断） ！

如果您有任何问题随时问。

工作示例：（包括表单验证、将项目添加到列表以及从列表中就地编辑项目）

---

附带说明一下，我会避免使用免费教程，因为它们通常很旧/没有维护，充满了语法错误，并宣扬了坏习惯。 如果你认真对待网络的发展，我会强烈建议投资于一些付费教程（像这样的一个-通常发售〜$ 10），因为他们是从行业的专业人士，由教师或助教维护，并趋向于更深入地了解事物的工作原理。