Javascript “删除”按钮将删除所有子项，而不仅仅是带有键的子项

我研究这个主题已经有一段时间了，但是我仍然无法使子组件（ControlledOpenSelect）中的“Remove”按钮仅通过使用回调函数移除传递的项

My ControlledOpenSelect（子组件）：

const-example={'skittle'：10，“胡萝卜”：20，“汽车”：50，“土豆”：30}
导出默认函数ControledOpenSelect（{ourObject=example，onRemove，key}）{
const classes=useStyles（）；
const[open，setOpen]=React.useState（false）；
const[product，setProduct]=React.useState（'None'）
常量[quantity，setQuantity]=React.useState（0）
const[price，setPrice]=React.useState（“”）
常量[小计，设置小计]=React.useState（0）
常量handleChange=（事件）=>{
setProduct（事件、目标、值）；
};
常量handleClose=（）=>{
setOpen（假）；
};
const handleOpen=（）=>{
setOpen（真）；
};
常量句柄数量=（事件）=>{
设置数量（事件.目标.值）
}
//const productList=Object.keys（ourObject）
//const correct_price=我们的对象[产品]
//React.useffect（（）=>{
//设定价格（正确的价格）
//}，[正确的价格]）
//React.useffect（（）=>{
//设置总计（价格*数量）
//}，[数量、产品、价格]）
返回(
打开选择按钮
产品
{productList.map(
item=>{item}
)}
{小计}

onRemove（键）}>Remove
);
}

我的父组件FullComponent：

const example={'skittle':10,"carrots":20,"cars":50,"potatoes":30}


const FullComponent=({ourObject=example})=>{

const [add,setAdd]=React.useState([])
// const [remove,setRemove]=React.useState([])

const id=React.useState(_uniqueId('prefix-'));

    const handleClick=(event)=>{
        setAdd([...add,
            <ControlledOpenSelect ourObject={ourObject} id={id}/>])     
    }

    const handleRemove=(id)=>{
        const newAdd=add.filter((item)=> item.id !== id)
        setAdd(newAdd)
    }

    return (
        <>
        {add.map((item)=>{
            return (
                <>
                <ControlledOpenSelect ourObject={ourObject} key={item.id}  onRemove={handleRemove} /> 
                 </>            )
        })}
        <button type="button" onClick={handleClick}>Add</button>
        </>
    )
}


export default FullComponent

const-example={'skittle'：10，“胡萝卜”：20，“汽车”：50，“土豆”：30}
const FullComponent=（{ourObject=example}）=>{
const[add，setAdd]=React.useState（[]）
//const[remove，setRemove]=React.useState（[]）
const id=React.useState（_uniqueId（'prefix-'）；
常量handleClick=（事件）=>{
setAdd（[…add，
])     
}
const handleRemove=（id）=>{
const newAdd=add.filter（（项）=>item.id！==id）
setAdd（newAdd）
}
返回(
{add.map（（项目）=>{
返回(
)
})}
添加
)
}
导出默认完整组件

---

非常感谢你

您没有将id传递给handleRemove方法。您需要传递一个内联函数，该函数将item.id作为参数传递

onRemove={() => handleRemove(item.id)}

---

您没有将id传递给handleRemove方法。您需要传递一个内联函数，该函数将item.id作为参数传递

onRemove={() => handleRemove(item.id)}

---

但是在子对象的props中，我要传递key={item.id}，所以在子对象中，我不应该将它作为onRemove={（）=>handleRemove（key）}引用吗？非常感谢。Nope

键

用于在列表中呈现项目时帮助做出反应以跟踪项目。这应该有帮助。另外，当您执行此操作时，

handleRemove（key）

您将得到错误，因为key没有定义。@hector在您的情况下，将key和delete函数分别作为道具传递有什么意义？在父组件：handleRemove（item.id）}/>（Shyam的解决方案）和子组件：onClick={onRemove}中，我以以下方式更改了子组件的属性handleRemove（item.id）}/>，并且在子组件中更改了要删除的属性，但我仍然有同样的问题：删除按钮会删除每个子项，而不仅仅是它发现自己所在的子项。传递给handleRemove的item.id和id的类型是否相同。我的意思是，例如，它们都是编号吗？还要添加一个console.log（id）并查看当您单击删除按钮时打印的内容。但是在我传递key={item.id}的子对象中，所以在子对象中，我不应该作为onRemove={（）=>handleRemove（key）}引用它吗？非常感谢。Nope

键

用于在列表中呈现项目时帮助做出反应以跟踪项目。这应该有帮助。另外，当您执行此操作时，

handleRemove（key）

您将得到错误，因为key没有定义。@hector在您的情况下，将key和delete函数分别作为道具传递有什么意义？在父组件：handleRemove（item.id）}/>（Shyam的解决方案）和子组件：onClick={onRemove}中，我以以下方式更改了子组件的属性handleRemove（item.id）}/>，并且在子组件中更改了要删除的属性，但我仍然有同样的问题：删除按钮会删除每个子项，而不仅仅是它发现自己所在的子项。传递给handleRemove的item.id和id的类型是否相同。我的意思是，例如，它们都是编号吗？还要添加一个console.log（id），并查看单击remove按钮时打印的内容。