React Hooks如何为动态生成的react-select组件定义动态useState状态

你现在的写法核心问题是所有动态生成的表单控件都绑定了同一个全局状态，不管新增多少组表单，修改任意一个select都会触发所有同类型控件的值同步变化。不需要为每个新增控件单独调用useState，用数组结构统一存储所有表单组的状态是最易维护的方案。

具体实现步骤 #

1. 替换原有单值状态为数组状态 #

删掉原来单独定义的mileStoneType、mileStoneAnswerType、mqCount这类零散状态，直接定义一个存储所有表单组数据的数组，数组长度就是当前要渲染的表单组数，初始值按你需要的默认展示组数填充即可：

const [formList, setFormList] = useState([
  {
    mileStoneType: null, // 第一组milestone多选框默认值
    questionText: '', // 第一组文本域默认值
    mileStoneAnswerType: null // 第一组answer type选择框默认值
  }
])

2. 改造添加按钮逻辑 #

点击加号时不需要累加计数，直接向表单数组末尾追加一个带默认值的新表单项即可：

<Button
  onClick={() => {
    setFormList([
      ...formList,
      { mileStoneType: null, questionText: '', mileStoneAnswerType: null }
    ])
  }}
  style={{ width: "100%" }}
  variant="outline-secondary"
>
  +
</Button>

3. 改造渲染逻辑，按索引绑定对应状态 #

遍历formList渲染每一组表单，每个控件的值直接读取当前索引对应的数据项，更新时只修改数组中对应索引的字段，完全不会影响其他组的表单值：

<div className="mqContainer">
  {formList.map((formItem, 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" }}
            value={formItem.mileStoneType}
            onChange={(val) => {
              const newList = [...formList]
              newList[i].mileStoneType = val
              setFormList(newList)
            }}
            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}
              value={formItem.questionText}
              onChange={(e) => {
                const newList = [...formList]
                newList[i].questionText = e.target.value
                setFormList(newList)
              }}
            />
          </Form.Group>
        </Col>
      </Row>
      <Row className="mt-4">
        <Col xs={3}>
          <span>answer type</span>
        </Col>
        <Col xs={6} className="mb-4">
          <Select
            value={formItem.mileStoneAnswerType}
            onChange={(val) => {
              const newList = [...formList]
              newList[i].mileStoneAnswerType = val
              setFormList(newList)
            }}
            options={MqAnswerTypeOption}
          />
        </Col>
      </Row>
      {/* 需要删除功能的话，在这里加删除按钮，过滤掉索引i对应的数据项即可 */}
    </div>
  ))}
  <Row>
    <Col xs={12} className=" mb-4 mt-4">
      <Button
        onClick={() => {
          setFormList([
            ...formList,
            { mileStoneType: null, questionText: '', mileStoneAnswerType: null }
          ])
        }}
        style={{ width: "100%" }}
        variant="outline-secondary"
      >
        +
      </Button>
    </Col>
  </Row>
</div>

避坑提示 #

• react-select做受控绑定的时候要用value属性，不要用defaultValue，否则动态渲染时很容易出现值不更新的问题
• 更新数组状态时必须返回新的数组引用，不要直接修改原数组，否则React不会触发组件重渲染
• 最后提交表单时，直接读取formList变量就能拿到所有组的填写内容，不需要从零散的state里拼接数据

内容的提问来源于stack exchange，提问作者mostafa faryabi