反应：根据先前状态构建动态表单并处理错误。状态错误

Question

我正在尝试在React中编写代码，以学习和构建一种动态形式，该形式从先前状态获取值并根据其生成。

前一个来自take输入计数，我设置为一个状态变量，组件下面使用它，即fromObj.count 以下是表单的组成部分：

import React,{ Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getDesignationDepartment } from '../actions/fetchActions';

class CollegeMember extends Component{
     constructor(props) {
             super(props);
            this.state= {
                formArray : {},
                errors:{},
                errorClass:{}
            }
     }

     componentDidMount(){
       this.props.getDesignationDepartment();
    }

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.handleValidation()) {
            this.props.formData(e);
        }
    }

    handleValidation = () => {
        let count=this.props.formObj.count;
        let errors = {};
        let errorClass = {};
        let formIsValid = true;
        for(let i=1;i<=count;i++){
            if (!this.state.formArray['name'+i]) {
                formIsValid = false;
                errors["name"+i] = "Name is required";
                errorClass["name"+i] = "is-danger";
            }
            if (!this.state.formArray['email'+i]) {
                formIsValid = false;
                errors["email"+i] = "Email is required";
                errorClass["email"+i] = "is-danger";
            }
            if (!this.state.formArray['contact'+i]) {
                formIsValid = false;
                errors["contact"+i] = "Contact is required";
                errorClass["contact"+i] = "is-danger";
            }
            if (!this.state.formArray['designation'+i]) {
                formIsValid = false;
                errors["designation"+i] = "Designation is required";
                errorClass["designaation"+i] = "is-danger";
            }
            if (!this.state.formArray['department'+i]) {
                formIsValid = false;
                errors["department"+i] = "Department is required";
                errorClass["department"+i] = "is-danger";
            }
              if (!this.state.formArray['gender'+i]) {
                formIsValid = false;
                errors["gender"+i] = "Gender is required";
                errorClass["gender"+i] = "is-danger";
            }

        }
        this.setState({
            errors: errors
        });
        this.setState({
            errorClass: errorClass
        });
        return formIsValid;
    }

     render(){
        if(this.props.List.department!==undefined && this.props.List.designation!==undefined ){
           let dept= this.props.List.department.map(data=>(
           <option key={data.id} value = {data.name} > {data.name} </option>
            ));

        let desg=this.props.List.designation.map(data=>(
            <option key={data.id} value={data.name}>{data.name}</option>
        ));
         var html = MemberForm(this.props.formObj.count,dept,desg);
        }

        return (<div className="container has-text-center">
        <form onSubmit={this.handleSubmit}>
        <div className="columns">{html}</div>
        <div className="columns field">
        <button className="button is-success" type="submit">Submit</button>
        </div>
        </form>
        </div>)
    }
}
export const MemberForm=(i,dept,desg)=>{  
    let buffer=[];
  for (let j=1;j<=i;j++){

    buffer.push((<div className="card" key={j}>
    <header className="card-header">
    <p className="card-header-title">Member Detail-{j}</p>
    </header>
    <div className="card-content">
    <div className="field">
    <label className="label">Name</label>
    <div className="control">
    <input name={"name"+j} className={"input "+ (this.state.errorClass["name"+j])} type="text" placeholder="Name"/>
    </div>
    <p className="help is-danger"></p>
    </div>
     <div className="field">
    <label className="label">Email</label>
    <div className="control">
    <input name={"email"+j} className={"input "+ (this.state.errorClass["email"+j])} type="email" placeholder="Email"/>
    </div>
    <p className="help is-danger"></p>
    </div>
     <div className="field">
    <label className="label">Contact</label>
    <div className="control">
    <input name={"contact"+j} className={"input "+ (this.state.errorClass["contact"+j])} type="tel" placeholder="Contact"/>
    </div>
    <p className="help is-danger"></p>
    </div>
    <div className="field">
     <label className="label">Select Gender</label>
        <div className="control">
            <div className={"select " + (this.state.errorClass["gender" + j])}>
                <select name={"gender" + j}><option value='' hidden>Select Gender</option>
                    <option value="m">Male</option>
                    <option value="f">Female</option>
                </select>
            </div>
        </div>
        <p className="help is-danger"></p>
    </div>
     <div className="field">
          <label className="label">Select Designation</label>
          <div className="control">
               <div className={"select "+ (this.state.errorClass["designation"+j])}>
                 <select name={"designation"+j}><option value='' hidden>Select Designation</option>
                {desg}
              </select>
            </div>
          </div>
          <p className="help is-danger"></p>
    </div>
    <div className="field">
          <label className="label">Select Department</label>
          <div className="control">
               <div className={"select "+ (this.state.errorClass["department"+j])}>
                 <select name={"department"+j}><option value='' hidden>Select Department</option>
              {dept}
              </select>
            </div>
          </div>
          <p className="help is-danger"></p>
    </div> 
    </div > </div> ));

  }
   return buffer;
}

CollegeMember.propTypes = {
    formObj: PropTypes.object.isRequired,
    getDesignationDepartment: PropTypes.func.isRequired
}
const mapStateToProps = state => ({
    formObj: state.apiData.formObj,
    List:state.memData.List
});
export default connect(mapStateToProps, {
    getDesignationDepartment
})(CollegeMember);

遇到错误：

  

TypeError：无法读取未定义的属性“状态”   在线

<input name={"name"+j} className={"input "+ (this.state.errorClass["name"+j])} type="text" placeholder="Name"/>

Answer 1

MemberForm是一个函数，将无法访问引用React中的类组件的this。您可以将状态作为参数传递给该函数，或者将其定义为一个函数而不使用箭头函数，以便可以使用显式this

进行调用

第一种方法

var html = MemberForm(this.props.formObj.count,dept,desg, this.state.errorClass);


export const MemberForm=(i,dept,desg, errorClass)=>{  
    let buffer=[];
  for (let j=1;j<=i;j++){

    buffer.push((<div className="card" key={j}>
    <header className="card-header">
    <p className="card-header-title">Member Detail-{j}</p>
    </header>
    <div className="card-content">
    <div className="field">
    <label className="label">Name</label>
    <div className="control">
    <input name={"name"+j} className={"input "+ (errorClass["name"+j])} type="text" placeholder="Name"/>
    </div>
    <p className="help is-danger"></p>
    </div>
     <div className="field">
    <label className="label">Email</label>
    <div className="control">
    <input name={"email"+j} className={"input "+ (errorClass["email"+j])} type="email" placeholder="Email"/>
    </div>
    <p className="help is-danger"></p>
    </div>
     <div className="field">
    <label className="label">Contact</label>
    <div className="control">
    <input name={"contact"+j} className={"input "+ (errorClass["contact"+j])} type="tel" placeholder="Contact"/>
    </div>
    <p className="help is-danger"></p>
    </div>
    <div className="field">
     <label className="label">Select Gender</label>
        <div className="control">
            <div className={"select " + (errorClass["gender" + j])}>
                <select name={"gender" + j}><option value='' hidden>Select Gender</option>
                    <option value="m">Male</option>
                    <option value="f">Female</option>
                </select>
            </div>
        </div>
        <p className="help is-danger"></p>
    </div>
     <div className="field">
          <label className="label">Select Designation</label>
          <div className="control">
               <div className={"select "+ (errorClass["designation"+j])}>
                 <select name={"designation"+j}><option value='' hidden>Select Designation</option>
                {desg}
              </select>
            </div>
          </div>
          <p className="help is-danger"></p>
    </div>
    <div className="field">
          <label className="label">Select Department</label>
          <div className="control">
               <div className={"select "+ (errorClass["department"+j])}>
                 <select name={"department"+j}><option value='' hidden>Select Department</option>
              {dept}
              </select>
            </div>
          </div>
          <p className="help is-danger"></p>
    </div> 
    </div > </div> ));

  }
   return buffer;
}

第二种方法

export function MemberForm(i,dept,desg) { 

并像使用它

var html = MemberForm.call(this, this.props.formObj.count,dept,desg, this.state.errorClass);