Typescript错误2769：map函数内传递process到state供Modal使用时报错

错误原因 #

你遇到的TS2769报错核心原因是onClick属性需要接收一个鼠标事件处理函数，但你当前的写法是直接执行了handleOpen(process)，相当于把handleOpen的返回值（void类型）传给了onClick，类型不匹配触发报错。

修复方案 #

只需要修改LaunchIcon的onClick绑定逻辑，有两种常用写法：

写法1：箭头函数包裹（最常用） #

把执行逻辑包在箭头函数里，点击时才会触发执行：

<LaunchIcon onClick={() => handleOpen(process)} />

写法2：改造handleOpen为柯里化函数 #

如果不想每次都写箭头函数，可以把处理函数改造成返回函数的形式：

// 定义时改造
const handleOpen = (process: any) => () => {
  setData(process);
  setOpen(true);
  // 这里直接打印data拿不到最新值，React状态更新是异步的
  // 要打印的话可以直接打process，或者在useEffect监听data变化
  console.log(process);
};

// 使用时直接绑定即可
<LaunchIcon onClick={handleOpen(process)} />

额外优化提示 #

你当前代码里setData(process)之后直接console.log(data)拿不到最新的state值，因为React的状态更新是批量异步执行的，要获取更新后的值可以直接打印入参process，或者用useEffect监听data的变化再执行后续逻辑。

内容的提问来源于stack exchange，提问作者Marco Ávila