Javascript React onChange Reender动态输入字段

更改动态字段中的数据时，我的功能组件会复制当前字段并重新绘制该字段，并将其添加到表单的末尾。我通过Object.keys.map显示输入字段，并在显示文本、数字、复选框字段之后，使用开关将状态和检查类型放在那里

import React, { useState } from 'react'

const Form = () => {

  const [state, setState] = useState({
    companyName: "seenus",
    tradeName: "ТОРТАЙ О.А ИП",
    description: "",
    email: "olzhastortay@gmail.com",
    region: "Almaty",
    phone: "(707) 795-15-09",
    bin: "",
    code: "",
    isActive: true,
    merchant_terminal: {
      terminal_id: "98264471",
      saveCard: false,
      isActive: true,
      currencyName: "KZT",
      isAmexAllowed: false,
      sendBack: false,
      parentId: "",
      B64ENCODE: false,
      persLimit: 0,
      isRecurAllowed: false,
      shouldUseNewKey: true,
      minSum: 0,
      postlinkTries: 0,
      MCC: 0,
      dailyLimit: 0,
      isFromEpay1: false,
      permitted_countries: "",
      forbidden_countries: ""
    }
  })

  
  const iterate = (obj: any): any => {
    
    return Object.keys(obj).map((key) => {

      switch(typeof obj[key]) {
        case 'object': 
          return iterate(obj[key])

        case 'string': 

          return (
            <div className="section-form" key={key}>
                <TextField 
                  label={key} 
                  variant="outlined"
                  defaultValue={obj[key]}
                  onChange={handleChange(key)}
                />
            </div>
          )

        case 'number': 
        
          return (
            <div className="section-form" key={key}>
                <TextField 
                  label={key} 
                  variant="outlined" 
                  type="number"
                  defaultValue={obj[key]}
                  onChange={handleChange(key)}
                />
            </div>
          )

        case 'boolean': 
        
          console.log('boolean inside')
          return (
            <div className="section-form" key={key}>
              <FormControlLabel
                control={<Switch checked={obj[key]} onChange={handleChange(key)} />}
                label={key}
              />
            </div>
          )

      }

    })

  }


  const handleChange = (prop: any) => (event: any) => {
    
    const {checked, value, type} = event.target
    
    switch (type) {
      case 'checkbox':
        return setState((prev: any) => ({...prev, [prop]: checked}))
      default: 
        return setState((prev: any) => ({...prev, [prop]: value}))
    }

  }

  return (
    <form>
      <h1 className="merch-title">Страница нового коммерсанта</h1>
      <div className="merch-form">
        { iterate(state) }
      </div>
      <div className="merch-btn">
        <Button size="large" variant="contained" type="submit" color="primary">
            создать коммерсанта
        </Button>
      </div>
      
    </form>
  )

}

export default Form

import React，{useState}来自“React”
常数形式=（）=>{
常量[状态，设置状态]=使用状态({
公司名称：“西努斯”，
商品名：“ПППАЙöА.АП”，
说明：“，
电子邮件：“olzhastortay@gmail.com",
区域：“阿拉木图”，
电话：“（707）795-15-09”，
bin:“，
代码：“，
是的，
商户终端：{
终端标识：“98264471”，
储蓄卡：假，
是的，
货币名称：“KZT”，
isAmexAllowed:错，
发回：错误，
父ID:“”，
B64编码：错误，
个人限制：0，
isrecurlawlowed:false，
应该使用newkey:true，
分钟：0，
后链接：0，
MCC:0，
每日限额：0，
isFromEpay1:错，
允许的国家：“，
被禁止的国家：“
}
})
常量迭代=（对象：任意）：任意=>{
返回Object.keys（obj.map）（（key）=>{
开关（obj[钥匙]类型）{
案例“对象”：
返回迭代（obj[key]）
大小写“string”：
返回(
)
案件编号：
返回(
)
“布尔”大小写：
log（'boolean-inside'）
返回(
)
}
})
}
常量handleChange=（属性：any）=>（事件：any）=>{
const{checked，value，type}=event.target
开关（类型）{
案例“复选框”：
返回setState（（prev:any）=>（{…prev[prop]：checked}））
违约：
返回setState（（prev:any）=>（{…prev[prop]：value}））
}
}
返回(
Страница нового коммерсанта
{迭代（状态）}
создать коммерсанта
)
}
导出默认表单

const handleChange=（arr？：any）=>（事件：any）=>{
const{checked，value，type}=event.target
设tmp=state
常数深度=阵列长度-1
for（设i=0；i

问题出在州里了。每次当我返回嵌套对象的状态时，我都会返回对象的第一个深度

const handleChange = (arr?: any) => (event: any) => {
    
        const {checked, value, type} = event.target
    
        let tmp = state
        const depth = arr.length -1
        
        for (let i = 0; i < arr.length; i++) {
          const depthKey = arr[i]
          
          if(i < depth) {
            tmp = tmp[depthKey]
          }
          if(i === depth) {
            tmp[depthKey] = (type === 'checkbox') ? checked : value
          }
    
        }
    
        return setState({...state})
    
      }