React Native onPress报错：Undefined is not a function求助

云上老周

2026-7-19

解决React Native中undefined is not a function（handleCardPress）错误

问题核心

你的PopularJobCard组件声明了要接收handleCardPress作为props，但父组件渲染该卡片时，没有传递这个函数，导致它的值为undefined。点击卡片时调用undefined()，就触发了这个错误。

解决方案

方案1：父组件传入`handleCardPress`函数

找到父组件中渲染PopularJobCard的代码，确保传入正确的函数：

// 父组件示例代码
<PopularJobCard
  item={jobItem}
  selectedJob={selected}
  handleCardPress={(item) => {
    console.log('Card pressed:', item);
    // 这里添加你的业务逻辑
  }}
/>

方案2：给组件props设置默认值（避免未传时报错）

修改PopularJobCard的props解构，给handleCardPress设置默认空函数：

const PopularJobCard = ({ item, selectedJob, handleCardPress = () => {} }) => {
  // ... 原有组件代码
}

方案3：组件内部定义`handleCardPress`（如果不需要父组件传参）

如果你想把函数写在卡片组件内部，不需要从props接收，直接修改组件：

const PopularJobCard = ({ item, selectedJob }) => {
  // 内部定义处理函数
  const handleCardPress = (item) => {
    console.log('Card pressed!', item);
  };

  return (
    <TouchableOpacity
      style={styles.container(selectedJob, item)}
      onPress={() => handleCardPress(item)}
    >
      // ... 原有组件内容
    </TouchableOpacity>
  )
}