React onChange 重新渲染动态输入字段奇怪答案

【问题标题】：React onChange rerender dynamic input fields strangeReact onChange 重新渲染动态输入字段奇怪
【发布时间】：2021-05-19 00:10:52
【问题描述】：

在动态字段中更改数据时，我的功能组件会复制当前字段并重新绘制该字段并将其添加到表单的末尾。我通过 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

input fields IMAGE

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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})
    
      }

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

【讨论】：