reack初尝试：Dom内容通过map遍历，useState应该如何应用才对呢？

Question

dom内容通过map遍历，useState应该怎么写才不显得冗余又可以正确对上每个input的内容和事件呢？一开始试了对象去堆，但发现语法没对，一直报错 /(ㄒoㄒ)/~~求指导

import React, { useState, Fragment } from 'react'
import { Input, Select, DatePicker, Col, Row } from 'antd'
const { Option } = Select;

const searchData = [
  {
    title: '商品名称',
    type: 1,
    id: 1
  },
  {
    title: '商品品牌',
    type: 1,
    id: 2
  },
  {
    title: '商品编号',
    type: 1,
    id: 3
  },
  {
    title: '商家选择',
    type: 2,
    id: 5
  },
  {
    title: '团队礼包',
    type: 2,
    id: 6
  },
  {
    title: '创建日期',
    type: 3,
    id: 7
  }
]
const GiftSearch = props => {
  const obj = {
    a1:[InputValue1, setInputValue1] = useState(''),
    a2:[InputValue2, setInputValue2] = useState(''),
  } 
  console.log(InputValue,'InputValue')
  return (
    <Row>
      {
        searchData.map(item => {
          const { title, type, id } = item
          return (
            <Row key={id}>
              <Col>{title}：</Col>
              <Col>
                {type === 1 && <Input value={obj[a+id]} onChange={(e)=>`${setInputValue+id(e.target.value)}`} />}
              </Col>
            </Row>
          )
        })
      }
    </Row>
  )
}
export default GiftSearch

Answer 1

你需要 immer 这种 immutable 的库：https://github.com/immerjs/immer

const GiftSearch = props => {
  const [data, setData] = useState(searchData)
  return (
    <Row>
      {
        searchData.map(({ title, type, id }) =>
            <Row key={id}>
              <Col>{title}：</Col>
              <Col>
                {type === 1 &&
                  <Input
                    value={data[id].value || ''}
                    onChange={e => setData(immer(data, tmp =>
                      tmp[id].value = e.target.value
                    ))}
                  />}
              </Col>
            </Row>
        )
      }
    </Row>
  )
}

Answer 2

使用useRef可以解决

import React, { useState, Fragment, useRef } from 'react'
import { Input, Select, Form, DatePicker, Col, Row, Button } from 'antd'
const { Option } = Select;

const searchData = [
  {
    title: '商品名称',
    showType: 1,
    name: 'proName',
    id: 0
  },
  {
    title: '商品品牌',
    name: 'proBrand',
    showType: 1,
    id: 1
  },
  {
    title: '商品编号',
    name: 'proCode',
    showType: 1,
    id: 2
  },
  {
    title: '商家选择',
    name: 'proChoose',
    showType: 2,
    id: 3
  },
  {
    title: '团队礼包',
    name: 'teamGift',
    showType: 2,
    id: 4
  },
  {
    title: '创建日期',
    begainName: 'regionBeginTime',
    endName: 'regionEndTime',
    showType: 3,
    id: 5
  },
]
const GiftSearch = props => {
  const { current: inputRef } = useRef({})
  let [itemLayout] = useState({
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
  })

  // 把时间字符串转换成时间戳
  const format = mytime => {
    if (mytime) {
      let dateTmp = mytime.replace(/-/g, '/')   //为了兼容IOS，需先将字符串转换为'2018/9/11 9:11:23'
      let timestamp = Date.parse(dateTmp)    //返回'2018-9-12 9:11:23'的时间戳
      return timestamp
    } else {
      return ''
    }
  }
  /* 搜索事件 */
  const printValues = e => {
    e.preventDefault();
    console.log(inputRef, 'inputRef')
  };
  /* 清空事件 */
  const clearValue = e => {
    this.props.form.resetFields();

  };

  /* input输入事件 */
  const updateField = (e, name) => {
    inputRef[name || e.target.name] = name ? e : e.target.value
  };

  return (
    <Fragment>
      <Form onSubmit={printValues}  {...itemLayout}>
        {searchData.map(item => {
          const { title, name, id,begainName,endName, showType } = item
          return (
            <Form.Item label={title} key={id}>
              {showType === 1 && <Input name={name} onChange={updateField} />}
              {
                showType === 2 && <Select defaultValue={'请选择'} name={name} onChange={val => updateField(val, name)}>
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                </Select>
              }
              {showType === 3 &&
                <Col>
                  <DatePicker onChange={(value, dataString) => updateField(format(dataString),begainName)} showTime />
                  <span style={{ margin: '0 10px' }}>至</span>
                  <DatePicker onChange={(value, dataString) => updateField(format(dataString),endName)} showTime />
                </Col>}
            </Form.Item>
          )
        })}
        <Button onClick={printValues}>查询</Button>
        {/* <Button onClick={clearValue}>清空</Button> */}
      </Form>
    </Fragment>
  );
}
export default GiftSearch