React Native报错：传入组件的Object非函数，求排查语法问题

错误原因 #

• 组件props接收方式错误：React函数组件的第一个参数是包含所有传入属性的props对象，你当前把item和handleCardPress作为独立参数，导致item实际是整个props对象，handleCardPress则是undefined，调用时自然触发“不是函数”的报错。
• onPress函数调用时机错误：直接写onPress={handleCardPress(item)}会在组件渲染阶段立即执行函数，而非点击按钮时执行，这不仅会引发错误，还会导致不必要的重复执行。

修正后的代码（ButtonColumn组件） #

import { Text, View, TouchableOpacity } from "react-native";
import React from "react";

import styles from "./buttonColumn.style";

// 通过对象解构从props中提取所需属性
const ButtonColumn = ({ item, handleCardPress }) => {
  return (
    <View style={{ flexDirection: "row" }}>
      {/* 用箭头函数包裹，确保点击时才执行函数并传递参数 */}
      <TouchableOpacity style={styles.btnStyle} onPress={() => handleCardPress(item)}>
        <Text style={{}}>Test1</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.btnStyle}>
        <Text style={{}}>Test2</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.btnStyle}>
        <Text style={{}}>Test3</Text>
      </TouchableOpacity>
    </View>
  );
};

export default ButtonColumn;

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