javascript - ReactJS ..event 处理程序适用于其中一种道具，但不是全部

Question

我正在尝试将 id 道具发送到偶数处理程序以处理事件。我有一个地图函数将名称和 id 作为道具发送，如下所示。当我尝试将 id 发送到 Delete Todo 组件中的事件处理程序时，我在 console.log() 中得到未定义的 id。但是当我使用 Name 道具时，console.log() 工作正常。知道我实际上缺少什么。请帮忙。

    const todolistt=todolist.map(td=>{
            return (
                <div>
              
                    <Deletetodo todo={td.id} name={td.name}  />
    
               </div>
            )
        })
     const handleDelete=(id)=>{
        console.log(id)//Getting undefined
    }
    const Deletetodo = ({id,name}) => {
        return (
    
            <div>
                <h1>{name}</h1>
                <p onClick={()=>{handleDelete(id)}}>X</p>
            </div>
        )
    }
    const handleDelete=(name)=>{
        console.log(name)//Name appers
    }
    const Deletetodo = ({id,name}) => {
    
        return (
    
            <div>
                <h1>{name}</h1>
                <p onClick={()=>{handleDelete(name)}}>X</p>
            </div>
        )
    }
    
       

标签： javascriptreactjs

Answer 1

您需要像这样命名道具“id”：

<Deletetodo id={td.id} name={td.name}  />

您正在传递一个名为“todo”的道具，但正在寻找一个名为“id”的道具