javascript - react-redux Action 创建者在 Prop 上不可用

我正在尝试使用react-plaid-link集成格子到我的应用程序。一切正常，直到我执行handleOnSuccess回调。我收到以下错误消息：


  未捕获的TypeError：无法读取未定义的属性'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，否则将在组件中丢失它。

您可以通过几种方式执行此操作：

方法一：
使用箭头功能

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>
   );
}