Javascript 基于单独字段的字段值删除字段值-formik

我有一个react-formik表单，其中有一个数字输入（组大小），根据该字段中的数字，该数量的字段将呈现在它下面以输入组成员名称。因此，如果组大小为3，则下面将呈现三个字段。向字段中添加名称并点击submit将发送值警报

我现在想做的是找到一种方法，随着组大小的减少，删除这些名称值。有人知道我该怎么做吗

import React from 'react'
import {Formik, withFormik, Form, Field, FieldArray} from 'formik'
import * as Yup from 'yup'

const FormikApp = (props) => {
  return(
  <div>
    <h1>Form</h1>
    <Formik
      initialValues = {{
        groupSize: 1,
        groupMembers: []
      }}
      onSubmit={(values)=>
        setTimeout(()=> {
          alert(JSON.stringify(values, null, 2))
        }, 500)
      }
      render={({values}) => (
        <Form>
        <label>
          Group Size:
          <Field type="number" name="groupSize"/>
        </label>
        <FieldArray
         name="groupMembers"
         render={(arrayHelpers) => (
            [...Array(values.groupSize)].map((member, i) => {
             return(
             <div key={i}>
               <Field name={`groupMembers.${i}`} placeholder="Group Member Name"/>
               <button onClick={() => {
                 arrayHelpers.remove(i)
                 values.groupSize = values.groupSize-1
                 }}>remove</button>
             </div>
           )}
         ))}
         />
         
        <button type="submit">Submit</button>
     </Form>
      )}
    />
  </div>
)}

---

我希望此结果在groupMembers数组中只有一项

您能将其设置为受控表单吗？使用groupMembers:stateArray代替groupMembers:[]，其中stateArray是受控状态。不能将其设置为受控表单吗？使用groupMembers:stateArray代替groupMembers:[]，其中stateArray是受控状态。

{
  "GroupSize": 3,
  "GroupMembers":[
    "test1",
    "test2",
    "test3
  ]
}

{
  "GroupSize": 1,
  "GroupMembers":[
    "test1",
    "test2",
    "test3
  ]
}