如何在mapDispatchToProps中同时传递事件对象与参数？

这个问题我之前也碰到过，核心问题是你在视图层的onClick箭头函数里没有正确接收事件对象，导致传递给onRowClick的event是undefined。下面给你两种可行的解决方案：

方案一：在箭头函数中显式接收事件对象 #

直接在onClick的箭头函数里捕获event，再把它和自定义参数一起传给onRowClick：

视图层代码修改： #

<TR key={`${index}`} onClick={(event) => onRowClick(id, event)}>

mapDispatchToProps保持不变： #

const mapDispatchToProps = dispatch => ({
  onRowClick: (id, event) => {
    console.log(id, event); // 现在就能正常拿到id和事件对象了
    // 这里可以添加你的dispatch逻辑，比如 dispatch(getRowDetail(id))
  }
})

方案二：使用bind绑定自定义参数 #

如果你不想用箭头函数，也可以通过bind提前绑定自定义参数，React会自动把事件对象作为后续参数传递过来：

视图层代码修改： #

<TR key={`${index}`} onClick={onRowClick.bind(null, id)}>

mapDispatchToProps无需调整参数顺序： #

const mapDispatchToProps = dispatch => ({
  onRowClick: (id, event) => {
    console.log(id, event); // 同样能拿到正确的参数
    // dispatch逻辑写在这里
  }
})

注意：bind的第一个参数是this指向，在函数组件或者mapDispatchToProps的箭头函数里，这里传null或者undefined都可以。

额外推荐：使用React Redux Hooks（更简洁） #

现在React Redux官方更推荐使用useDispatch Hook来替代mapDispatchToProps，写法会更直观：

import { useDispatch } from 'react-redux';

const YourTableComponent = () => {
  const dispatch = useDispatch();

  const handleRowClick = (id, event) => {
    console.log(id, event);
    dispatch(yourActionCreator(id)); // 直接在这里派发action
  };

  return (
    <Table>
      {/* 其他代码 */}
      <TR key={index} onClick={(event) => handleRowClick(id, event)}>
        {/* 表格内容 */}
      </TR>
    </Table>
  );
};

不管用哪种方式，只要确保事件对象被正确传递到你的处理函数里，就能同时拿到自定义参数和事件对象啦～

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