Reactjs 如何根据另一个数字输入中的数字动态创建多个字段？

我想要这种行为，下面是代码片段：

当字段X更改其数值（整数值）时（通过用户交互）：

如果X的值现在更大，则向字段数组（称为A）添加新字段，直到有X个字段为止（数组中的字段应为

数字类型或
类型）

否则，如果X的值现在较低，请删除字段数组A中的最后一个字段，直到只有X个字段为止

这是我的出发点：

const { fields, append, prepend, remove, swap, move, insert } = useFieldArray(
  {
    control,
    name: "A",
  }
);

watch((data, options) => {
  // console.log('d, o', data, options);

  if (options.name === 'X') {
    let z = data.X;
    while (z) {
      // remove?
      --z;
    }
  }
});

在文档中，据说不会在一次渲染中放置多个移除调用，如果输入没有以影响现有值的方式更改其值，我还希望保留现有值（因此应保留a中的值）

我也使用它，但它是组件的另一部分，应该可以：

{X > 0 && (
    <div>
        {fields.map((field, index) => {
...

{X>0&&(
{fields.map（（字段，索引）=>{
...

我可以在纯React中实现这一点，但我使用的是React钩子表单模块，我想知道如何在不放弃React钩子表单依赖的情况下实现所需的行为

请帮帮我！谢谢！

我在同一个包中使用了react hook表单

if (f.type === "multiple") {
  return (
    f.condition() && (
      <Controller
        control={control}
        name={f.name}
        defaultValue={[]}
        render={({
          field: { onChange, onBlur, value, name, ref },
          fieldState: { invalid, isTouched, isDirty, error },
          formState,
        }) => {
          let seq = [];
          const x = f.count();
          for (let i = 0; i < x; i++) {
            seq.push(i);
          }

          return (
            <div tabIndex={0} onBlur={onBlur} ref={ref}>
              {seq.map((field, index) => {
                return (
                  <React.Fragment key={index}>
                    {f.renderChild({ index, onChange })}
                  </React.Fragment>
                );
              })}
            </div>
          );
        }}
      />
    )
  );
}

if（f.type==“多个”）{
返回(
f、 条件（）(
{
设seq=[]；
常数x=f.count（）；
for（设i=0；i{
返回(
{f.renderChild（{index，onChange}）}
);
})}
);
}}
/>
)
);
}