ReactJs始终打印相同的id

我正在尝试创建一个包含一些数据的表，但在打印正确的id时遇到问题

首先，我创建了带有表和所有相关元素的父组件

在

中，我运行了一个

map（）

函数，它在整个

数组中循环，并为每个
对象返回
组件

对象数组

let maintenance_task = [
    {
        task_id: 1,
        task: 'task 1',
        description: '',
        date: '2020-02-02'
    },
    {
        task_id: 2,
        task: 'task 2',
        description: '',
        date: '2020-02-02'
    },
    {
        task_id: 3,
        task: 'task 3',
        description: '',
        date: '2020-02-02'
    },
    {
        task_id: 4,
        task: 'task 4',
        description: '',
        date: '2020-02-02'
    }
]

父组件

<tbody id="list-tasks">
   {
      props.maintenance_task.map( (task, index) => {
         return (
            <TaskRow
               key={ index }
               task={ task } 
            />
         );
      })
   }
</tbody>


{
道具维护任务地图（（任务，索引）=>{
返回(
);
})
}

子组件。

import React from 'react';

function TaskRow(props) {

    const toggle_delete_task = (task_id) => {

        console.log(task_id);

        const confirm_remove_task = document.getElementById('remove-task');
        const loading_animation = document.getElementById('loading-animation-section');

        confirm_remove_task.classList.toggle('d-block');
        loading_animation.classList.toggle('d-block');
    }

    return (
        <tr>
            <td><p>{ props.task.task }</p></td>
            <td><p>{ props.task.description }</p></td>
            <td><p>{ props.task.date }</p></td>

            <td className="wrap-inputs-task">
                <input type="button" value="Edit" />
                <input type="button" value="Delete" onClick={ () => toggle_delete_task(props.task.task_id) } /> // delete button
            </td>

            <td id="remove-task" className="confirm-remove-task">
                <p>Are you sure you want to remove this task ?</p>

                <span>
                    <input type="button" value="Confirm" />
                    <input type="button" value="Cancel" onClick={ () => toggle_delete_task(props.task.task_id) } /> // cancel button
                </span>
            </td>
        </tr>
    );
}

export default TaskRow;

从“React”导入React；
功能任务行（道具）{
const toggle_delete_task=（task_id）=>{
console.log（任务id）；
const confirm_remove_task=document.getElementById（'remove-task'）；
const load_animation=document.getElementById（'load-animation-section'）；
确认删除任务。类列表。切换（'d-block'）；
加载_animation.classList.toggle（'d-block'）；
}
返回(
{props.task.task}

{props.task.description}

{props.task.date}

切换_delete_task（props.task.task_id）}/>//删除按钮
是否确实要删除此任务

切换_delete_task（props.task.task_id）}/>//取消按钮
);
}
导出默认任务行；

单击“删除”按钮时，它将运行
切换\u delete\u task（）
，在控制台中打印当前
任务id
，并显示
删除任务
元素

问题是，当我单击cancel按钮并运行相同的功能时，
toggle\u delete\u task（）
它将始终在控制台中打印
1
，这是
数组中
对象
的第一个
任务id
，
中所有
删除任务
元素都具有相同的
id
，当您执行
document.getElementById（'remove-task'）
时，它只选择属于
task1
的第一个
remove task
元素

你必须给他们每个人一个不同的
id
s，可能是在当前
task
的
task\u id
后面追加


...

然后在您的
切换\u delete\u task
，确保获得正确的
确认\u remove\u task
元素

const toggle\u delete\u task=（task\u id）=>{
console.log（任务id）；
const confirm\u remove\u task=document.getElementById(
`删除任务-${props.task.task_id}`
);
...
};


或者更简洁的方法是为
remove task
元素的id创建一个变量，并在按id分配和选择元素时引用该变量

功能任务行（道具）{
const removeTaskElementId=`remove task-${props.task.task_id}`；
...
什么是
get_maintenance_task
而您的孩子需要
props.task
但在您的父组件中看不到？@ShubhamVerma
get_maintenance_task
这是我传递的函数，它应该做其他事情。很抱歉，我在这里编写代码时忘记插入
task
，我编辑了它噢