Javascript 表单组件名称正在react js的antd中更新

我使用antd表单创建任务列表，每个表单都有“提交”和“取消”按钮，每当用户创建任务时，都会生成一个新表单。我将任务数记为表单id。但是在更改字段时，我必须获取表单id，但是表单id正在使用任务计数值进行更新

创建Task.js

import React from "react";
import actions from "../redux/actions";
import store from "../redux/store";
import { Button } from 'antd';
import '../stylesheet/createTask.scss';
import {useSelector} from "react-redux";
import TaskForm from "./taskForm";
const CreateTask=()=>{
    const addTask=useSelector((state)=>{
        const {taskCount,task,templates}=state?.reducers
        return {taskCount,task,templates}
    })
    const {taskCount,task,templates}=addTask;
    const createTask=()=>{
        templates.push(<div id={`task${taskCount+1}`} key={`template${taskCount}`}><TaskForm/></div>);
        store.dispatch({type:actions.ON_ADD_TASK,payload:templates})
    }
return(
    <div className={"create-task"}>
        <span className={"task-count"}>Task {taskCount} </span>
        <Button onClick={createTask}>+</Button>
        {templates && templates.map((data)=>data)}
    </div>
)
}
export default CreateTask;

表单id正在使用任务计数进行更新。参考图片：

---

您可以使用道具为每个任务设置不同的表单ID。 在Task.js中，更改createTask如下：

const createTask=()=>{
templates.push(<div id={`task${taskCount+1}`} key= 
{`template${taskCount}`}><TaskForm taskId={taskCount}/></div>);
    store.dispatch({type:actions.ON_ADD_TASK,payload:templates})
}

return (
    <Form {...layout} form={form}
          initialValues={userData}
          name={`form${props.taskId}`}
          onChange={fieldsChange}
          onFinish={onFinish}>
....
</Form>

constcreatetask=（）=>{
push（）；
dispatch（{type:actions.ON_ADD_TASK，payload:templates}）
}

然后在TaskForm.js中，按如下方式更改表单：

const createTask=()=>{
templates.push(<div id={`task${taskCount+1}`} key= 
{`template${taskCount}`}><TaskForm taskId={taskCount}/></div>);
    store.dispatch({type:actions.ON_ADD_TASK,payload:templates})
}

return (
    <Form {...layout} form={form}
          initialValues={userData}
          name={`form${props.taskId}`}
          onChange={fieldsChange}
          onFinish={onFinish}>
....
</Form>

返回(
....

是的，我也找到了这个。谢谢！