React状态提升中removeTour未定义/非函数问题排查

问题场景 #

基于React状态提升架构开发时，需求如下：

• 由App.js负责渲染数据变更
• 子组件Card.js触发操作：点击「Not Interested」按钮，将对应id传递给上层函数，最终在App.js中移除该id对应的Tour元素

但点击按钮时控制台提示removeTour未定义或不是函数。

错误原因 #

Card组件的props解构写法错误：当前写法将removeTour作为组件的第二个参数（context），而非从props对象中解构，导致无法获取父组件传递的removeTour函数。

正确写法 #

将removeTour包含在props解构对象内：

function Card({id,name,info,image,price,removeTour}){
  // 组件逻辑
}

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