Javascript 修改元素数组

我有一个应用程序，用户可以在一个包含2个字段的表单中添加数据。他们可以添加任意数量的字段

const Demo = () => {
  const onFinish = values => {
    console.log("Received values of form:", values);
  };
  const firstDefaultOpen = {
    name: 0,
    key: 0,
    isListField: true,
    fieldKey: 0
  };
  const testHandler = a => {
    console.log("result", a.concat(firstDefaultOpen));
    return a.concat(firstDefaultOpen);
  };
  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {testHandler(fields).map(field => (
                <Space
                  key={field.key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="start"
                >
                  <Form.Item
                    {...field}
                    name={[field.name, "first"]}
                    fieldKey={[field.fieldKey, "first"]}
                    rules={[{ required: true, message: "Missing first name" }]}
                  >
                    <Input placeholder="First Name" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, "last"]}
                    fieldKey={[field.fieldKey, "last"]}
                    rules={[{ required: true, message: "Missing last name" }]}
                  >
                    <Input placeholder="Last Name" />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

这里我映射（）新数组：

 {testHandler(fields).map(field => (...

问题是当我单击“添加字段”按钮时，因为当我试图在一个输入中写入内容时，另一个输入中也会出现相同的文本。之所以会出现这种情况，是因为当我单击

addfield

按钮时，您可以在

console.log（“result”，a.concat（firstDefaultOpen））中看到，这两个对象具有相同的值，如：

[Object, Object]
0: Object
name: 0
key: 0
isListField: true
fieldKey: 0
1: Object
name: 0
key: 0
isListField: true
fieldKey: 0

问题：如何将第一个对象的所有值设置为0，将下一个值设置为更高，并获得类似的值

[Object, Object]
0: Object
name: 0
key: 0
isListField: true
fieldKey: 0
1: Object
name: 1
key: 1
isListField: true
fieldKey: 1
2: Object
name: 2
key: 2
isListField: true
fieldKey: 2
...

演示：
这是一种混乱的解决方案，但它可以工作。。。自始至终添加评论


从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“/index.css”；
从“antd”导入{Form，Input，Button，Space}；
从“@ant design/icons”导入{MinusCircleOutlined，PlusOutlined}”；
常量演示=（）=>{
const onFinish=值=>{
log（“接收到的值的形式：”，值）；
};
常量firstDefaultOpen={
//将默认值设置为null
名称：空，
key:null，
伊斯利斯菲尔德：是的，
字段键：空
};
const testHandler=a=>{
//检查是否为null并首先设置为0
if（firstDefaultOpen.name==null）{
firstDefaultOpen.name=0；
firstDefaultOpen.key=0；
firstDefaultOpen.fieldKey=0；
}
//如果不为null..则向每个对象项添加1以使每个对象项唯一
否则{
firstDefaultOpen.name=firstDefaultOpen.name+1；
firstDefaultOpen.key=firstDefaultOpen.key+1；
firstDefaultOpen.fieldKey=firstDefaultOpen.fieldKey+1；
}
log（“result”，a.concat（firstDefaultOpen））；
返回a.concat（firstDefaultOpen）；
};
返回(
{（字段，{add，remove}）=>{
返回(
{testHandler（fields）.map（field=>(
{
删除（字段名称）；
}}
/>
))}
{
添加（）；
}}
块
>
添加字段
);
}}
提交
);
};
render（，document.getElementById（“容器”）
您可以使用
let
关键字声明
defaultOpen
对象，并在准备显示更新版本时调用“update”函数，如：


let defaultOpen=getFirstDefaultOpen（）；
日志（默认打开）；
updateDefaultOpen（默认打开）；
日志（默认打开）；
updateDefaultOpen（默认打开）；
日志（默认打开）；
函数updateDefaultOpen（currentState）{
currentState.name++；
currentState.key++；
currentState.fieldKey++；
}
函数getFirstDefaultOpen（）{
返回{
姓名：0，
关键字：0，
伊斯利斯菲尔德：是的，
字段键：0
}
}
函数日志（当前状态）{
const output=Object.keys（currentState）.reduce（（str，key）=>{
str+=`${key}:${currentState[key]}，`；
返回str；
},"");
log（`{${output}}`）；
}
您只需将
firstDefaultOption
从变量更改为如下函数即可完成此操作

    function firstDefaultOption(optionVal){
        return {
         name: optionVal,
         key: optionVal,
         isListField: optionVal,
         fieldKey: optionVal
     }
   }

    const testHandler = a => {
    console.log("A",a)
    console.log("result", a.concat(firstDefaultOption(a.length)));
    return a.concat(firstDefaultOption(a.length));
  };

然后像这样更改测试处理程序

    function firstDefaultOption(optionVal){
        return {
         name: optionVal,
         key: optionVal,
         isListField: optionVal,
         fieldKey: optionVal
     }
   }

    const testHandler = a => {
    console.log("A",a)
    console.log("result", a.concat(firstDefaultOption(a.length)));
    return a.concat(firstDefaultOption(a.length));
  };

我喜欢你的解决方案，我在我的一个应用程序中实现了，当我上传一个图像时，突然出现了另一对输入。如果没有您的实现，它不会出现，您是否看到任何问题。我知道这可能是另外一个问题，但你能看一下吗？如果你愿意帮忙，那就太好了，谢谢。你觉得这个问题怎么样？当我添加很多子字段时，它不起作用。字段中的文本被复制到另一个输入中。在我这方面，一切似乎都很好。。除非我看错了你的问题？Link----->问题是：当我用文本填充输入和添加图像时，bellow会出现另一对输入，但它们不应该出现。