Javascript 道具值在React js钩子中未定义

我正在编写一个记事本web应用程序。我使用React钩子来使用状态变量。我正在使用

axios

从api获取数据。数据包含一个对象列表，其中包含

\u id

、

title

、

status

和

detail

。我将三个值作为属性传递给

update按钮

，并在

onClick（）

方法中使用这些属性设置状态变量的值。然后将这些值作为道具发送到

UpdateTask

组件。问题是，这三个变量中有两个（_id和title）得到了正确的值，但有一个变量（detail）得到了未定义的值。下面是我的代码

import React, {useState, useEffect} from 'react';
import axios from 'axios';

import UpdateTask from './UpdateTask.jsx';
import DeleteTask from './DeleteTask.jsx';



function Tasks()
{
    useEffect(()=>
    {
        async function fetchingData()
        {
            const tasks = await axios('http://127.0.0.1:8000/tasks');
            setTasks(tasks.data)
            
        };
        fetchingData();
    })

    function handleUpdateClick(e)
    {
        setViewUpdate(!viewUpdate);
        setUpdateId(e.target.id);
        setUpdateTitle(e.target.title);
        setUpdateDetail(e.target.detail);
        console.log(e.target)
    }

    function handleDeleteClick(e)
    {
        setViewDelete(!viewDelete);
        setDeleteId(e.target.id)
    }

    const [tasks, setTasks] = useState([]);

    const [viewUpdate, setViewUpdate] = useState(false);
    const [updateId, setUpdateId] = useState(null);
    const [updateTitle, setUpdateTitle] = useState('');
    const [updateDetail, setUpdateDetail] = useState('');

    const [viewDelete, setViewDelete] = useState(false);
    const [deleteId, setDeleteId] = useState(null);

    var listTasks = tasks.map((task)=>
    {
    return(
        <li className="main-task-list-items task-main" key={task._id} id={task._id}> 
            <h1>{task.title}</h1>
            <p>{task.detail}</p>
            <p>Status {task.status.toString()}</p>
            <button
                className="task-main-btn btn btn-primary"
                id={task._id}
                detail={task.detail}
                title={task.title}
                onClick={handleUpdateClick}
            >
                Update Task
            </button>
            <button
                className="task-main-btn btn btn-danger"
                id={task._id}
                onClick={handleDeleteClick}
            >
                Delete Task
            </button>
        </li>
        );
    })
    
    return(
        <div>
            <ul>{listTasks}</ul>
            {viewUpdate ? <UpdateTask title={updateTitle} detail={updateDetail} id={updateId} handleCancel={handleUpdateClick} /> : null }
            {viewDelete ? <DeleteTask id={deleteId} handleNo={handleDeleteClick}/> : null }
        </div>
    )
}

export default Tasks;

从“React”导入React，{useState，useffect}；
从“axios”导入axios；
从“/UpdateTask.jsx”导入UpdateTask；
从“/DeleteTask.jsx”导入DeleteTask；
功能任务（）
{
useffect（（）=>
{
异步函数fetchingData（）
{
常量任务=等待axios（'http://127.0.0.1:8000/tasks');
setTasks（tasks.data）
};
获取数据（）；
})
功能手柄更新点击（e）
{
setViewUpdate（！viewUpdate）；
setUpdateId（即target.id）；
setUpdateTitle（如target.title）；
setUpdateDetail（即目标详细信息）；
console.log（例如target）
}
函数handleDeleteClick（e）
{
setViewDelete（！viewDelete）；
setDeleteId（e.target.id）
}
const[tasks，setTasks]=useState（[]）；
const[viewUpdate，setViewUpdate]=useState（false）；
const[updateId，setUpdateId]=useState（null）；
const[updateTitle，setUpdateTitle]=useState（“”）；
常量[updateDetail，setUpdateDetail]=useState（“”）；
const[viewDelete，setViewDelete]=useState（false）；
常量[deleteId，setDeleteId]=useState（null）；
var listTasks=tasks.map（（task）=>
{
返回(

{task.title}
{task.detail}

状态{task.Status.toString（）}

更新任务
删除任务

);
})
返回(
{liststasks}
{viewUpdate？：null}
{viewDelete？：null}
)
}
导出默认任务；

---

有人能帮我解决这个问题吗？

尝试添加onClick，结束函数并传递任务-

onClick={（）=>handleUpdateClick（任务）}

在函数调用中更新此项。！ 试试这个

---

您可以获得id和title，因为它位于事件目标下详细信息不是事件目标的属性。这可能就是问题所在。

尝试用函数结束并传递任务，在单击时添加onClick-

onClick={（）=>handleUpdateClick（任务）}

在函数调用中更新此项。！ 试试这个

---

您可以获得id和title，因为它位于事件目标下详细信息不是事件目标的属性。这可能就是问题所在。

尝试记录任务、数据并检查响应中是否存在详细信息我尝试过此操作。当我在

handleUpdateClick（）

method中记录

e.target

时，它给出了包含所有属性的元素，但当我记录

e.target.detail

时，它给出了未定义的元素。注意：当我记录

e.target.title

时，它给出了正确的值。请尝试记录任务。数据并检查响应中是否存在详细信息我已经尝试过了。当我在

handleUpdateClick（）

method中记录

e.target

时，它给出了包含所有属性的元素，但当我记录

e.target.detail

时，它给出了未定义的元素。注意：当我记录

e.target.title

时，它给出了正确的值

function handleUpdateClick(task) {
        setViewUpdate(!viewUpdate);
        setUpdateId(task._id);
        setUpdateTitle(task.title);
        setUpdateDetail(task.detail);
}