Javascript ES6 绑定(bind)错误 react

Question

谁能解释为什么我在使用以下设置时总是出错:

我的构造函数中有这个语句:

this.bitLink = this.bitLink.bind(this),

然后我的函数如下:

bitLink(url){

    let bitly = new Bitly('f06707dhbt4c63f50d83735fa83bba16bcbdc41');

    bitly.shorten(JSON.stringify(url), (response) => {
      console.log(response);
    }, (error) => {
      console.log(error);
    });
}

然后我这样调用我的函数:

<p className="shareBtn" onClick={this.bitLink(`/album/${album._id}`)}>Share!</p>

但是当我加载页面时出现此错误:

Uncaught TypeError: Cannot read property 'bitLink' of undefined

根据我的研究，这似乎是为 this 提供正确上下文的正确方法，但它仍然返回未定义。

编辑:

完整组件:

import React, { Component } from 'react'
import actions from '../actions'
import { connect } from 'react-redux'
import { APIManager } from '../utils'
import {Router, Route, Redirect, Link, withRouter } from 'react-router-dom'
import {Image, CloudinaryContext, Transformation} from 'cloudinary-react';
import Bitly from 'bitly';



class AlbumBoard extends Component {
constructor(){
    super()
    this.state = {
        albums: []
    }
}


render(){

    const toPublicId = (image) => {
        return image.slice(62, image.length)
    }

    const bitLink = (url) => {
        let bitly = new Bitly('f06707da4944c63f50d83735fa83bba16bcbdc41');

        bitly.shorten(JSON.stringify(url), (response) => {
          console.log(response);
        }, (error) => {
          console.log(error);
        });
    }

    return(
        <div className="albumBoard">

        {(this.props.currentUser) ?
            this.props.currentUser.albums.map(function(album, i){
                return <div key={i} className="thumbnailContainer">
                            <h2>{album.name}</h2>
                            <Link to={`/album/${album._id}`}>{album._id}</Link>
                            <p>{album.description}</p>
                            <div className="albumThumbnailContainer">
                            <CloudinaryContext cloudName="djswgrool" fetchFormat="auto">
                                    { (album.images.length < 3) ?
                                        <Image publicId={toPublicId(album.images[0].url)} responsive className="album2">
                                            <Transformation
                                                width="200"
                                                height="200"
                                                crop="fill" />
                                        </Image>
                                        :
                                        <div>
                                            <Image publicId={toPublicId(album.images[0].url)} responsive className="album1">
                                                <Transformation
                                                    width="200"
                                                    height="200"
                                                    crop="fill" />
                                            </Image>
                                            <Image publicId={toPublicId(album.images[1].url)} responsive className="album2">
                                                <Transformation
                                                    width="200"
                                                    height="200"
                                                    crop="fill" />
                                            </Image>
                                            <Image publicId={toPublicId(album.images[2].url)} responsive className="album3">
                                                <Transformation
                                                    width="200"
                                                    height="200"
                                                    crop="fill" />
                                            </Image>
                                        </div>

                                    }
                                </CloudinaryContext>
                            </div>
                            <div className="X"></div>
                            <p className="shareBtn" onClick={bitLink(`/album/${album._id}`)}>Share!</p>
                        </div>
            })
        :
            null}
        </div>
    )
}
}

const stateToProps = (state) => {
return {
    currentUser: state.account.currentUser
}
}

export default connect(stateToProps)(AlbumBoard)

Answer 1

您没有将函数引用传递给 onClick 事件，而是传递从函数 bitLink 返回的值。
这是因为你正在调用它

onClick={this.bitLink()}

而不是仅仅传递它的引用

onClick={this.bitLink}

如果你想传递一个参数给它，你需要:
创建另一个包装函数，它将返回并将参数传递给它:
您可以通过多种方式做到这一点: 柯里化(Currying):

bitLink(url){
  return function(e){
    let bitly = new Bitly('f06707dhbt4c63f50d83735fa83bba16bcbdc41');

    bitly.shorten(JSON.stringify(url), (response) => {
      console.log(response);
    }, (error) => {
      console.log(error);
    });
  }
}

或箭头函数:

bitLink = (url) => (e){
    let bitly = new Bitly('f06707dhbt4c63f50d83735fa83bba16bcbdc41');

    bitly.shorten(JSON.stringify(url), (response) => {
      console.log(response);
    }, (error) => {
      console.log(error);
    });
}

或者事件中的箭头函数:

onClick={() => {this.bitLink(url)}}

请注意，这将在每次渲染时创建一个新的函数实例。