添加动态useState

Question

I see this link but didn't get any answer for my question

在我的组件中，我有两个选择框和一个that区域，它们拥有指定的状态(由use状态定义)。

所以点击add按钮这个表单一次又一次地创建，我的问题是如何动态地定义新的状态来为动态创建的新选择箱设置它。我的选择框使用react select和它们的代码在这里：

      <div className="mqContainer">
        {[...Array(mqCount)].map((x, i) => (
          <div key={i} className="newMqWrapper mt-4">
            <Row className="mt-4">
              <Col xs={3}>
                <span>milestone</span>
              </Col>
              <Col xs={6}>
                <Select
                  style={{ width: "100px !important" }}
                  defaultValue={mileStoneType}
                  onChange={setmileStoneType}
                  options={MileStoneTypeOption}
                  isMulti={true}
                />{" "}
              </Col>
            </Row>
            <Row className="mt-4">
              <Col xs={3}>
                <span>question text</span>
              </Col>
              <Col xs={8}>
                <Form.Group>
                  <Form.Control
                    placeholder="why so serious?"
                    className=" dirrtl"
                    as="textarea"
                    rows={3}
                  />
                </Form.Group>{" "}
              </Col>
            </Row>
            <Row className="mt-4">
              <Col xs={3}>
                <span>answer type</span>
              </Col>
              <Col xs={6} className="mb-4">
                <Select
                  defaultValue={mileStoneAnswerType}
                  onChange={setmileStoneAnswerType}
                  options={MqAnswerTypeOption}
                />{" "}
              </Col>
            </Row>
          </div>
        ))}
        <Row>
          <Col xs={12} className=" mb-4 mt-4">
            <Button
              onClick={() => setMqCount(mqCount + 1)}
              style={{ width: "100%" }}
              variant="outline-secondary"
            >
              +
            </Button>{" "}
          </Col>
        </Row>
      </div>

​

​

Answer 1

我希望我能正确理解你的问题。

通常，您会创建一个组件，您可以在其中单独调用useState()。之后，您可以在map()中呈现它。

我试着复制你的结构：

import { useState } from 'react'

const Form = () => {
  const [ mqCount, setMqCount ] = useState(0)

  return (
    <div className='mqContainer'>
      {[ ...Array(mqCount) ].map((x, i) => {
        // TODO: pass your required props here
        return <Item key={i} />
      })}
      <Row>
        <Col className='mb-4 mt-4' xs={12}>
          <Button
            style={{ width: '100%' }}
            variant='outline-secondary'
            onClick={() => setMqCount(mqCount + 1)}
          >
            +
          </Button>{' '}
        </Col>
      </Row>
    </div>
  )
}

const Item = ({ mileStoneType, MileStoneTypeOption, setmileStoneType }) => {
  const [ yourState, setYourState ] = useState('Whatever you want')
  // TODO: replace it with your own state

  return (
    <div key={i} className='newMqWrapper mt-4'>
      <Row className='mt-4'>
        <Col xs={3}>
          <span>milestone</span>
        </Col>
        <Col xs={6}>
          <Select
            isMulti
            defaultValue={mileStoneType}
            options={MileStoneTypeOption}
            style={{ width: '100px !important' }}
            onChange={setmileStoneType}
          />{' '}
        </Col>
      </Row>
      <Row className='mt-4'>
        <Col xs={3}>
          <span>question text</span>
        </Col>
        <Col xs={8}>
          <Form.Group>
            <Form.Control
              as='textarea'
              className=' dirrtl'
              placeholder='why so serious?'
              rows={3}
            />
          </Form.Group>{' '}
        </Col>
      </Row>
      <Row className='mt-4'>
        <Col xs={3}>
          <span>answer type</span>
        </Col>
        <Col className='mb-4' xs={6}>
          <Select
            defaultValue={mileStoneAnswerType}
            options={MqAnswerTypeOption}
            onChange={setmileStoneAnswerType}
          />{' '}
        </Col>
      </Row>
    </div>
  )
}