React onClick函数无法移除数组元素，按钮删除Box组件失效求助

我帮你梳理了代码里的问题，移除功能失效的核心原因是点击事件没有传递要删除的boxId，另外还有几个细节可以优化，具体如下：

• 核心问题：removeItem未传入目标box的ID
  在BoxList的map方法中，你直接把removeBox函数传给了Box的removeItem属性，但点击按钮时，这个函数并没有拿到要删除的盒子ID。这就导致removeBox里的boxId是undefined，filter条件box.id !== undefined会保留所有项，自然看不到列表变化。

  两种修复方式任选其一：

  1. 在传递removeItem时用箭头函数包裹，传入当前box的ID：

     <Box 
       width={box.width} // 顺便修正：你之前把width和height传反了
       height={box.height} 
       color={box.color} 
       id={box.id} 
       removeItem={() => removeBox(box.id)} 
     />
     

  2. 在Box组件内部的Button点击时，主动传递当前组件的ID：

     // Box组件中的Button
     <Button onClick={() => props.removeItem(props.id)}/>
     

• 次要细节：宽高属性传反
  你在渲染Box时把width和height的数据源搞反了（width={box.height}），这会导致盒子的尺寸不符合预期，虽然不影响移除功能，但建议修正，避免样式混乱。

• 初始状态优化建议
  初始的boxes数组里是一个空属性的对象{height: "", width:"", color:"", id:""}，如果用户还没添加新盒子，这个空盒子会显示一个无尺寸的元素，建议把初始状态设为空数组[]，或者在渲染前过滤掉空属性的项。

内容的提问来源于stack exchange，提问作者Angela Inniss