从 reduxform 回调中将 props 组件添加到 props 参数中答案

【问题标题】：Add props component into props parameter from reduxform callback从 reduxform 回调中将 props 组件添加到 props 参数中
【发布时间】：2019-03-29 15:53:03
【问题描述】：

我想知道这种情况是否有可能：

const MyComponent = ({props1, props2}) => (
  <div >
    // SOME STUFF using props1 and props2
  </div>
);


const ReduxFormWithMyComponent = reduxForm({
  form: 'test',
  onSubmitFail: (errors, dispatch, submitError, props) => {
    // here I would like to have access to props1 and props2 like:
    // const { props1, props2 } = props;
  },
  onSubmitSuccess: (result, dispatch, props) => {
    // same here:
    // const { props1, props2 } = props;
  },
})(MyComponent);

所以基本上，我需要根据props1 和props2 在onSubmitFail 和onSubmitSuccess 回调中的值做一些有条件的事情。

根据documentation，我没有看到任何这样做的细节。

谢谢

【问题讨论】：

您的代码是正确的。有什么问题？
问题出在 onSubmitFail（或 onSubmitSuccess）主体内，我无法访问 props1（或 props2）
那里的代码是正确的，所以也许你没有将道具传递给 ReduxFormWithMyComponent。请分享您传递道具和导出此模块的方式

标签： reactjs redux redux-form

【解决方案1】：

我找到了解决我的问题的方法。可能对遇到同样问题的人有用。

这里是：

你的组件必须是这样的形状：

const MyComponent = ({handleSubmit, props1, props2}) => (
  <div >
  <form
    onSubmit={handleSubmit(data => myCustomSubmitFonction(data, {props1, props2}))}
  >
    // SOME STUFF using props1 and props2
  </form>
  </div>
);

根据reduxform documentation，您可以从reduxform 传递handleSubmit 作为道具。因此，您可以向handleSubmit 函数提供任何您想要的参数（在我的例子中：props1 和props2）

那么，myCustomSubmitFonction需要返回：

myCustomSubmitFonction(reduxFormData, myCustomData) {
    // reduxFormData useless in my case
    return myCustomData;
}

现在，我可以通过result（第一个参数）访问props1和props2：

const ReduxFormWithMyComponent = reduxForm({
  form: 'test',
  onSubmitFail: (errors, dispatch, submitError, props) => {
    const { props1, props2 } = result;
    // Yay !!
  },
  onSubmitSuccess: (result, dispatch, props) => {
    const { props1, props2 } = result;
    // Yay !!
  },
})(MyComponent);

【讨论】：