React中@miu/x-data-grid点击函数每行渲染就触发，如何改为仅点击时执行

onClick属性要求传入的是函数引用，但你当前直接写了DataEdit(params)，这段代码会在组件渲染阶段直接执行，拿到函数返回值绑定给onClick，所以才会出现每一行渲染时自动触发DataEdit的问题。

有两种常用的修改方式，可根据场景选择：

• 方式一：使用箭头函数包裹执行逻辑（最通用，写法简单）
  调整renderCell里IconButton的onClick绑定逻辑，仅在点击事件触发时执行DataEdit：

  field:'Delete',
  headerName:'Delete',
  width:100,
  sortable:false,
  disableClickEventBubbling:true,
  renderCell: (params) => {
      return( 
          <div>
              <IconButton
              aria-label="add an alarm"
              onClick={() => DataEdit({id: params.id})}
              >
                  <Delete
                  color="error"
                  style={{cursor:'pointer'}}
                  />
              </IconButton>
          </div>
      )
  }
  

  注意：因为DataEdit接收的是解构的{id}对象参数，所以调用时需要将params.id包裹为对象传入，避免参数获取异常。

• 方式二：改造DataEdit为高阶函数（避免每次渲染生成新函数，性能更优）
  调整DataEdit定义，使其返回一个可作为事件处理函数的闭包：

  const DataEdit = ({id}) => () => {
      console.log(id)
  }
  

  原有绑定逻辑不需要额外修改，直接写onClick={DataEdit({id: params.id})}即可，渲染阶段只会拿到返回的事件函数，不会触发内部的console.log逻辑，仅点击时才执行。

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