在反应中填充动态呈现的表单字段

Question

我有3个materialUI TextField，它们被渲染了n次（n是渲染表单字段之前用户的整数输入，我将其存储在名为groupMembersCount的变量中）。我通过这种方式动态渲染它：

export default function DynamicGroupMember() 
    const [groupMembersCount, setGroupMembersCount] = useState(0);
    const [show, setShow] = useState(false);
    const [groupDetails, setGroupDetails] = useState([
        fullName: "", phoneNo: "", gender: "",
    ]);
  function handleChange(event, index) 
        console.log(event.target.value, index);
        let newArr = [...groupDetails]; // copying the old datas array
        let item = newArr[index];
        item = ...item, [event.target.name]: event.target.value;
        newArr[index] = item;

        setGroupDetails(newArr);
    

    return (
        <div>
            Number of Group: <TextField name="groupMembersCount" onChange=(event) => 
            setGroupMembersCount(event.target.value)
        />
            Array.apply(null, length: groupMembersCount).map(
                (e, i) => (
                    <div key=i>
                        <strong>Member #i + 1</strong>
                        <div className="getIndex" name=i + 1>
                            <TextField
                                id=`name$i + 1`
                                name="fullName"
                                variant="outlined"
                                margin="none"
                                label="Name"
                                onChange=(event) => 
                                    handleChange(event, i)
                                
                            />
                            <TextField
                                id=`phoneNo$i + 1`
                                name="phoneNo"
                                variant="outlined"
                                margin="none"
                                label="Mobile Number"
                                onChange=(event) => 
                                    handleChange(event, i)
                                
                            />
                            <Select
                                id=`gender$i + 1`
                                name="gender"
                                variant="outlined"
                                margin="none"
                                label="Gender"
                                onChange=(event) => 
                                    handleChange(event, i)
                                
                            >
                                <option value="MALE">Male</option>
                                <option value="FEMALE">Female</option>
                                <option value="OTHER">Other</option>
                            </Select>
                        </div>
                    </div>
                )
            )
            <Button onClick=() => 
                setShow(true)
            >Show</Button>
            
                show ?
                    groupDetails.map(member =>
                        <Card>
                        <CardContent>
                            <Typography color="textSecondary" gutterBottom>
                                member.fullName
                            </Typography>
                            <Typography variant="h5" component="h2">
                                member.phoneNo
                            </Typography>
                            <Typography color="textSecondary">
                                member.gender
                            </Typography>
                        </CardContent>
                    </Card>) : null
            
        </div>
    );

如果我填写数字（groupMembersCount），然后填写那些表单字段，然后填写，我修改了groupMembersCount（增加或减少），如果要增加，该怎么办？用户填写的值应保留，如果减少，则表单字段值应清除。我尝试从groupDetails数组传递值以在“值”属性中形成表单，但它显示错误，因为最初写/传递值的索引在该索引处不存在。