React中如何传递函数作为参数？子组件调用父函数报错

核心错误原因 #

你的SearchBar组件接收props的方式有误，React组件的所有props都包含在单个参数对象中，而你拆成了两个参数：

// 错误写法
function SearchBar({ placeholder }, { stateChange }) { ... }

第二个参数实际是undefined，所以stateChange自然取不到，导致调用时报错。

修正代码 #

将SearchBar的参数改为从同一个props对象中解构所有属性：

// 正确写法
function SearchBar({ placeholder, stateChange }) { ... }

额外优化建议 #

• 避免在render中调用异步方法：父组件Future的render方法里直接调用this.displayPlayer(Player.playerID)，会导致每次渲染都触发请求，引发不必要的重复渲染和接口调用，建议把这部分逻辑移到componentDidUpdate中，判断playerID变化时再调用。
• 尽量避免全局变量：使用Player.playerID这种全局变量管理状态，容易引发不可预测的状态问题，建议完全通过父组件的state和props传递来管理数据。

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