React点击Icon触发onClick事件报监听器为object类型错误

你触发该报错的直接原因是：onClick属性要求接收函数类型的监听器，但你实际传入的是对象类型值。

• 你写的onClick={addItemToBasket && TodoComponent}不符合JSX事件绑定规则：&&逻辑运算符在左侧为真值时，会直接返回右侧的值。此处addItemToBasket是已定义的函数（属于真值），所以最终传给onClick的是TodoComponent这个样式对象，完全不是可执行函数。
• 代码存在JSX语法错误：StarBorderIcon标签未正确闭合，DOM层级结构书写不规范，运行时也可能触发编译报错。
• 逻辑混淆：TodoComponent是存储样式配置的普通对象，本身不是可执行的点击逻辑，不能直接放在事件绑定的位置。

如果你的需求是点击图标时，既执行加购逻辑，又切换图标样式，参考以下正确写法：

import { useState } from 'react';
function fullComponent (){
 const dispatch = useDispatch();
 // 用状态控制样式是否生效
 const [isAdded, setIsAdded] = useState(false);

 const addItemToBasket = () => {
    dispatch(
      addToBasket({
        id,
        name,
        price,
       })
    );
    // 加购完成后更新状态，应用样式
    setIsAdded(true);
  };

  const activeIconStyle = {
    backgroundColor: "#44014C",
  }

 return (
   <div> 
    <StarBorderIcon 
      onClick={addItemToBasket}
      style={isAdded ? activeIconStyle : {}}
    />
   </div>
 )
}

如果你的需求是点击时执行两段独立的业务逻辑，需要把多段逻辑包裹在同一个箭头函数中传给onClick，写法如下：

<StarBorderIcon 
  onClick={() => {
    // 第一段逻辑：加购
    addItemToBasket();
    // 第二段逻辑：其他自定义操作，比如埋点上报、提示弹窗等
    console.log('用户点击了加购图标');
  }}
/>

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