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

您没有将函数引用传递给https://console.starter-ca-central-1.openshift.com/console/command-line事件，而是传递函数onClick返回的值。
这是因为你正在调用它

bitLink

而不只是传递它的引用

onClick={this.bitLink()}

如果要将参数传递给它，则需要：
创建另一个将返回并将参数传递给它的包装函数：
您可以通过以下几种方式实现：讨好：

onClick={this.bitLink}

或箭头功能：

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

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

Answer 2

你试过这样的： onClink={() => this.bitLink( /专辑/ $ {album._id} )}

Javascript ES6 Bind错误反应

2 个答案: