React中mapDispatchToProps映射的Action不接收参数问题咨询

嘿，我来帮你搞定这个问题！看了你的代码，问题出在mapDispatchToProps里的doStuff函数定义上——它现在是个无参函数，根本没接住子组件传过来的参数，自然没法把参数传递给doStuffAction。

下面给你几种可行的解决方案：

方案1：手动让映射函数接收参数并传递给Action #

直接修改mapDispatchToProps，让doStuff接收参数，然后把参数传给doStuffAction：

function mapDispatchToProps(dispatch) {
  return { 
    // 这里接收子组件传递的参数，再传给action
    doStuff: (param) => dispatch(doStuffAction(param)) 
  };
}

如果你的Action需要多个参数，也可以这样写：

doStuff: (param1, param2) => dispatch(doStuffAction(param1, param2))

或者把参数打包成对象传递（更推荐，扩展性更好）：

doStuff: ({ value, id }) => dispatch(doStuffAction({ value, id }))

方案2：使用bindActionCreators简化代码 #

Redux提供了bindActionCreators工具，可以自动帮你处理参数传递的逻辑，不用手动写箭头函数：

import { bindActionCreators } from 'redux';

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    { doStuff: doStuffAction }, // 把Action和映射的函数名对应起来
    dispatch
  );
}

这样处理后，子组件调用onDoStuff(yourParam)时，参数会自动传递给doStuffAction，非常省心。

方案3：改用React Redux Hooks（推荐现代项目使用） #

如果你的项目已经升级到React Redux v7.1+，可以用useDispatch Hooks来替代connect，代码会更简洁，也不容易出错：

import { useDispatch } from 'react-redux';

const myParentComponent = ({ sourceValue, classes }) => { 
  const dispatch = useDispatch();
  // 直接定义带参数的函数
  const doStuff = (param) => dispatch(doStuffAction(param));

  return ( 
    <div> 
      <MyComponent className={classes.iconWithText} value={sourceValue} onDoStuff={doStuff} /> 
    </div> 
  ); 
} 

// 不用再用connect包裹，直接导出withStyles处理后的组件
export default withStyles(styles)(myParentComponent);

最后还要确认下你的子组件是否正确传递了参数！比如子组件里触发onDoStuff的时候，要确保把需要的参数传进去，举个例子：

// 子组件示例代码
export default class MyComponent extends React.Component {
  handleAction = () => {
    // 比如传递子组件的value参数给父组件的doStuff
    this.props.onDoStuff(this.props.value);
  };

  render() {
    return (
      <button onClick={this.handleAction}>
        执行操作
      </button>
    );
  }
}

这样调整后，你的Action就能正常接收参数啦！

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