Javascript childComponent中嵌套对象数组formik和handleChange的问题

在formik验证期间，我在将值传递给handleChange时遇到了一个问题。因此，我创建了一个组件，其数量的添加取决于numChild的数量。我想当他点击图标时，他可以在技能表中添加任意数量的技能。有人能指导我如何正确操作吗？谢谢你的提示

//Parent component
state = {
    numChildren: 0 //
  };

 addComponent = () => {
    this.setState({
      numChildren: this.state.numChildren + 1
    });
  };

  render()
  {
    const children = []; // in loop i try created components

//in this place i try set props to child component but i do something wrong and i get error

    for (var i = 0; i < this.state.numChildren; i += 1) {
      children.push(<SkillComponent key={i} name1={values.skills.basicAttack.name} 
        name2={values.skills.specialAttack.name}
        damage={values.skills.damage}
        handleChange={handleChange}/>);
    }
    return(
        <Formik
              initialValues={{
                name: '',

// here I try to add as many elements as the user creates skills by SkillComponent with this structure
/*
this my single skill
                 {
                    basicAttack: {
                      name: ''
                    },
                    specialAttack: {
                      name: ''
                    },
                    damage: 0
                  }
*/
                skills: [
                  {
                    basicAttack: {
                      name: ''
                    },
                    specialAttack: {
                      name: ''
                    },
                    damage: 0
                  }
                ]
              }}
              validationSchema={validationSchema}
              onSubmit={(values) => {
                console.log("Working")
              }}
              />
              {({
                values
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting
              }) => (

                <Form onSubmit={handleSubmit}>
                    //some code
                    ... 
                    <FontAwesomeIcon
                      icon={faPlus}
                      onClick={this.addComponent}// If the user clicks I will increase the numChild       
                    />
                    {children}
                </Form>
              )
            </Formik>

//父组件
状态={
子女：0//
};
addComponent=（）=>{
这是我的国家({
numChildren:this.state.numChildren+1
});
};
render（）
{
const children=[]；//在循环中我尝试创建组件
//在这个地方，我尝试将道具设置为子组件，但我做了一些错误的事情，结果出现了错误
对于（变量i=0；i
{({
价值观
handleChange，
车把，
手推，
提交
}) => (
//一些代码
... 
{儿童}
)

和子组件

class SkillComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <Form.Group controlId='formBasicEmail'>
          <Form.Control
            type='text'
            name='name'
            value={this.props.name1}
            handleChage={this.props.handleChange}
          />
        </Form.Group>
        <Form.Group controlId='formBasicEmail'>
          <Form.Control
            type='text'
            name='name'
            value={this.props.name2}
            handleChage={this.props.handleChange}
          />
        </Form.Group>
        <Form.Group controlId='formBasicEmail'>
          <Form.Control
            type='text'
            name='name'
            value={this.props.damage}
            handleChage={this.props.handleChange}
          />
        </Form.Group>
      </div>
    );
  }
}

export default SkillComponent;

class SkillComponent扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(
);
}
}
导出默认SkillComponent；

---

感谢所有帮助

首先，您试图访问

for

循环中的

值

变量，但该变量在那里无法访问。在您的情况下，我将从一些

generateChildren

方法开始，该方法将负责重复您的子组件：

getChildren = (values, handleChange) => 
  [...Array(this.state.numChildren)].map(num => 
    <SkillComponent 
      key={num} 
      name1={values.skills.basicAttack.name} 
      name2={values.skills.specialAttack.name}
      damage={values.skills.damage}
      handleChange={handleChange}
    />
  )

render() {
  <Formik>
    {({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
      <Form onSubmit={handleSubmit}>
        <FontAwesomeIcon icon={faPlus} onClick={this.addComponent} />
        {this.getChildren(values, handleChange)}
      </Form>
    )}
  </Formik>
}

getChildren=（值，handleChange）=>
[…数组（this.state.numChildren）].map（num=>
)
render（）{
{（{values，handleChange，handleBlur，handleSubmit，isSubmitting}）=>(
{this.getChildren（值，handleChange）}
)}
}

首先，您试图访问

for

循环中的

值

变量，该变量在那里不可访问。在您的情况下，我将从一些

generateChildren

方法开始，该方法将负责重复您的子组件：

getChildren = (values, handleChange) => 
  [...Array(this.state.numChildren)].map(num => 
    <SkillComponent 
      key={num} 
      name1={values.skills.basicAttack.name} 
      name2={values.skills.specialAttack.name}
      damage={values.skills.damage}
      handleChange={handleChange}
    />
  )

render() {
  <Formik>
    {({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
      <Form onSubmit={handleSubmit}>
        <FontAwesomeIcon icon={faPlus} onClick={this.addComponent} />
        {this.getChildren(values, handleChange)}
      </Form>
    )}
  </Formik>
}

getChildren=（值，handleChange）=>
[…数组（this.state.numChildren）].map（num=>
)
render（）{
{（{values，handleChange，handleBlur，handleSubmit，isSubmitting}）=>(
{this.getChildren（值，handleChange）}
)}
}