React onClick绑定报错：期望函数类型，实际得到对象类型

错误原因 #

你在按钮的onClick属性中写了handleCountry()，这会在组件渲染时立即执行函数，并把函数返回的数组（对象类型）传给onClick，但React要求onClick必须接收一个函数引用，所以触发了类型错误。

修复步骤 #

1. 修正onClick绑定方式
   把onClick={handleCountry()}改为onClick={handleCountry}，这样传递的是函数本身，只有点击按钮时才会执行：

<button className={styles.button} onClick={handleCountry}>
  Country
</button>

2. 优化函数逻辑（避免数组重复累积）
   原代码中arr是全局变量，每次点击按钮都会往里面追加数据，导致数组越来越大。建议把arr移到函数内部，同时用forEach替代map（因为你只是遍历push，不需要返回新数组）：

const handleCountry = () => {
  let arr = [];
  for (let i = 0; i < context.gameAdData.length; i++) {
    context.gameAdData[i].forEach((element) => {
      arr.push(element._fieldsProto.Country?.stringValue);
    });
  }
  // 这里可以添加对arr的后续处理，比如更新组件state
  console.log('处理后的国家数组:', arr);
};

额外说明 #

如果需要给函数传递参数，可以用箭头函数包裹：

<button onClick={() => handleCountry(自定义参数)}>Country</button>

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