ReactJS：无法使用多步表单使数据进入状态

Question

我正在使用多步骤表单，因此我在functions之外的不同class中创建了多步骤表单。由于此输入，字段值在undefined中成为states。我正在使用FormData来获取输入值。这是示例代码。

class AccountInfo extends Component {
  constructor(props) {
    super(props) 
    this.state = {
      currentStep: 1,
      userAccountData: {
        userid: '',
        imgearray: [],
        name: '',
      }
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }

handleFileUpload = (event) => {
    this.setState({imgearray: event.currentTarget.files[0]})
  };

handleSubmit = event => {
    let that = this;
    const { AccountAction, userID } = that.props;

    event.preventDefault();

    const data = new FormData(event.target);

    let accountInputs = {
      userid: 68,
      imgearray: that.state.imgearray,
      name: data.get('name'),
}
that.setState({
      userAccountData: accountInputs,
    })
}

AccountInfoView = () => {
  return (
    <div className="container">
    <React.Fragment>
      <Formik
        initialValues={{name:'', email: '', phone: '', bio: '' }}
        validationSchema={accountInfoSchema}
        render={() => {
        return(
      <Form onSubmit={this.handleSubmit}>
      <Step1 currentStep={this.state.currentStep} file= {this.state.imgearray} handleFileUpload={this.handleFileUpload} name={this.state.userAccountData['name']}
        bio= {this.state.bio}
        phone= {this.state.phone}
        gender= {this.state.gender}
        birthdate= {this.state.birthday}/>
      <Step2 currentStep={this.state.currentStep} />
      <Step3 currentStep={this.state.currentStep} />
      </Form>
      );
    }}
    />
    </React.Fragment>
    </div>
  )
}
render() {    
  return (
    <div>{this.AccountInfoView()}</div>
  )
}

}

function Step1(props)  {

  if (props.currentStep !== 1) {
    return null
  } 
  return(
    <React.Fragment>
    <div className="inner_account">
      <h2 className="accsec_title">Create your account</h2>
      <div className="upload">
          <label htmlFor="profile">
            <div className="imgbox">
              <img src={siteurl + IMAGE.trans_116} alt="" /> 
              { props.file ? <img src={props.file && URL.createObjectURL(props.file)} className="absoImg" alt="" /> : 
                <img src={imgurl} className="absoImg" alt="" /> }
            </div>
          </label>
          <input id="profile" name="file" type="file" accept="image/*" onChange={props.handleFileUpload}/>
          <span className="guide_leb">Add your avatar</span>
        </div>
      <div className="reg_form">
        <ul>
          <li>
            <div className="custom_group">
              <Field type="text" name="name" className="trans text_input" placeholder="Enter your name" />
              <label className="label_two">Name</label>
              <ErrorMessage name="name" />
            </div>
          </li>
        </ul>
      </div>
    </React.Fragment>
  );
}