react-redux action creator 在 props 上不可用答案

【问题标题】：react-redux action creator not available on propsreact-redux action creator 在 props 上不可用
【发布时间】：2018-06-05 14:06:12
【问题描述】：

我正在尝试使用 react-plaid-link 将 plaid 集成到我的应用中。在我执行 handleOnSuccess 回调之前，一切正常。我收到以下错误消息：

未捕获的类型错误：无法读取未定义的属性“createTransferSource”

由于某种原因，当我调用 handleOnSuccess 时，从“../../actions”导出的动作创建者不可用

这是我的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PlaidLink from 'react-plaid-link';
import * as actions from '../../actions';

const plaidPublicKey = process.env.REACT_APP_PLAID_PUBLIC_KEY;

class PlaidAuthComponent extends Component {

  handleOnSuccess(token, metadata) {
    // send token to client server
    this.props.createTransferSource(metadata);  
  }

  render() {
    return (
      <div>
        <PlaidLink
          publicKey={`${plaidPublicKey}`}
          product="auth"
          env="sandbox"
          clientName="plaidname"
          onSuccess={this.handleOnSuccess}
          />
      </div>
    );
  }
}

export default connect(null, actions )(PlaidAuthComponent);

来自我的操作文件夹中的 index.js 文件

export * from './transfer_actions';

我的 transfer_actions.js 文件

export const createTransferSource = (values, callback) => {
  return function (dispatch){

  axios({
    method : 'POST',
    url: `xxx/transfer_source.json`, 
    data: { values } 
  })
    .then(response => {
      dispatch({ 
        type: CREATE_TRANSFER_SOURCE,
        payload: response
      });
    })
    .then(() => callback())
    .catch( error => {
    dispatch({
      type: CREATE_TRANSFER_SOURCE_ERROR,
      payload: error.response
    });
    });
  };
};

【问题讨论】：

您的错误提示您尝试调用this.handleCreateTransferSource - 您的代码中的这个调用在哪里？这是一个错字吗？错误实际上是指您的 handleOnSuccess 函数中的调用 this.createTransferSource 吗？
好收获。正在破解我的方式并复制了错误的错误消息。现在更新了
this.props.createTransferSource 而不是 this.createTransferSource，你是对的 Shubham。
更新了新代码和错误信息。当我试图解决这个问题时，我有点生气
我添加了有关如何将 createTransferSource 获取到组件的更多详细信息。我从 index.js 文件中导出 transfer_actions。在我的 transfer_actions 中，我定义了动作创建者

标签： javascript reactjs react-redux plaid

【解决方案1】：

你需要绑定 this 否则你会在你的组件中丢失它。

您可以通过多种方式做到这一点：

方法一：
使用箭头函数

handleOnSuccess = (token, metadata) => {
  this.props.createTransferSource(metadata);
}

方法二：
在构造函数中绑定。

constructor(props) {
   super(props);

   this.handleOnSuccess = this.handleOnSuccess.bind(this); 
}

方法三：
在引用handleOnSuccess 的位置直接绑定。

render() {
    return (
      <div>
        <PlaidLink
          publicKey={`${plaidPublicKey}`}
          product="auth"
          env="sandbox"
          clientName="plaidname"
          onSuccess={this.handleOnSuccess.bind(this)}
          />
      </div>
   );
}

方法四：
使用箭头函数调用 handleOnSuccess 引用

render() {
    return (
      <div>
        <PlaidLink
          publicKey={`${plaidPublicKey}`}
          product="auth"
          env="sandbox"
          clientName="plaidname"
          onSuccess={() => this.handleOnSuccess}
          />
      </div>
   );
}

【讨论】：

【解决方案2】：

我在这里找到了答案：https://github.com/reactjs/react-redux/issues/328

我添加了以下代码

  constructor(props){
    super(props);
    this.handleOnSuccess = this.handleOnSuccess.bind(this); 
  }

【讨论】：

【解决方案3】：

你可以这样写handleOnSuccess：

handleOnSuccess = (token, metadata) => {
  this.props.createTransferSource(metadata);
}

这样您就可以保留this 上下文并且不需要构造函数进行绑定。

【讨论】：