React组件函数Prop传递报错：func不被识别为函数求助

可能原因及修复步骤 #

1. 修正username的Prop类型错误 #

你的Contact.propTypes中把username定义为PropTypes.object.isRequired，但实际传递的是字符串类型的用户名（onlinePeopleExcludingOurUser[userId].username）。类型不匹配会触发PropTypes警告，可能导致组件渲染异常，间接影响其他Prop的正常传递。

修改Contact.jsx中的Prop类型定义：

Contact.propTypes = {
  id: PropTypes.string.isRequired,
  username: PropTypes.string.isRequired, // 改为string类型
  func: PropTypes.func.isRequired,
  selected: PropTypes.bool.isRequired,
  online: PropTypes.bool.isRequired,
};

2. 排查所有Contact组件的渲染实例 #

确认项目中所有使用Contact组件的地方，都严格传递了funcProp，且值为函数类型。如果存在某个实例未传递func，即使PropTypes标记为必填，在非严格模式下可能仅触发警告，但运行时func会是undefined，点击时就会报错。

3. 确保数据源存在有效属性 #

检查onlinePeopleExcludingOurUser[userId]是否存在有效对象：如果userId对应的对象不存在，username会变为undefined，触发PropTypes错误，干扰组件正常渲染。可以通过可选链避免这种情况：

<Contact
  id={userId}
  username={onlinePeopleExcludingOurUser[userId]?.username || ''}
  func={() => setselectedUserId(userId)}
  selected={userId == selectedUserId}
  online={true}
/>

4. 临时添加容错判断（可选） #

在Contact组件的点击事件中添加判断，避免func为undefined时执行报错：

onClick={() => typeof func === 'function' && func(id)}

5. 打印调试确认func值 #

在Contact组件开头添加日志，确认传递过来的func实际类型：

export default function Contact({ id, username, func, selected, online }) {
  console.log('Received func:', func, 'Type:', typeof func); // 调试日志
  // ... 组件其余代码
}

通过以上步骤，定位并修复func未正确传递的问题。

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