コールバック関数でこのエラーを参照しているエラー

Question

私は正常にfirebaseストレージにアップロードし、約束を使ってイメージURLを取得できますが、アップロードの完了率にプログレスバーをリンクしたいと思っていました。私がこれまでに達成した：コンポーネントで定義されたこれらのコールバックと

this.props.handleNewPrizeImageUpload(this.progressCallback, this.imageUploadCompletionCallback, prizeImage)

：：私はコンポーネントからこの関数を呼び出すと

progressCallback (progress) { 
    **//this.someOtherFunction(progress).bind(this)** 
    return console.log('Upload is ' + progress + '% done') 

    } 

    imageUploadCompletionCallback (url) { 
    **//this.props.someOtherFunctionB(url)** 
    console.log('SAVEPRIZEIMAGE RAN SUCCESFULLY RETURN URL : ', url)} 

この機能は動作します：

export function handleNewPrizeImageUpload (progressCallback, imageUploadCompletionCallback, 
    prizeImage) { 
    savePrizeImage(progressCallback, imageUploadCompletionCallback,prizeImage) 
} 

を

savePrizeImageはイメージを保存し、それに従ってコールバック関数を実行する関数です。

進捗値とURLデータを正常に取得できますが、私が直面している問題は、これらのコールバック内で他の定義された関数を使用して取得したデータを実行できないというエラーです。は定義されていません。私はバインドしようとしましたが、これはうまくいきません。

エラー：

constructor (props) { 
    super(props) 
    this.someOtherFunction = this.someOtherFunction.bind(this) 
    } 

をして、そのようにそれを呼び出す：

Uncaught TypeError: Cannot read property 'someOtherFunction' of undefined

私が試してみました何

progressCallback (progress) { 
    console.log('Upload is ' + progress + '% done') 
    this.someOtherFunction(progress) 
    } 

    someOtherFunction (progress) { 
    console.log('HAHAHA') 
    } 

Heerさんが全体の構成要素であるコードブロック：

import React, { Component, PropTypes } from 'react' 
import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import {CreatePrizeForm} from 'components' 
import * as ActionCreators from 'redux/modules/prizes' 

export class CreatePrizeFormContainer extends Component { 

    static contextTypes = { 
    router: PropTypes.object.isRequired 
    } 

    constructor (props) { 
    super(props) 
    // this.someOtherFunction = this.someOtherFunction.bind(this) 
    // this.progressCallback = this.progressCallback.bind(this) 
    } 

    handlePrizeData (prizeImage) { 
    this.props.handleNewPrizeImageUpload(this.progressCallback, this.imageUploadCompletionCallback, PrizeImage) 
    } 


    progressCallback (progress) { 
    console.log('Upload is ' + progress + '% done') 
    //this.someOtherFunction(progress) 
    } 


    imageUploadCompletionCallback (url) { 
    console.log('SAVE TO FIREBASE RAN SUCCESFULLY RETURNED IMAGE URL : ', url) 
    } 

    someOtherFunction (progress) { 
    console.log('HAHAHA') 
    } 

    render() { 
    return (
     <div> 
     <CreatePrizeForm addPrizeData = {(prizeImage) => { this.handlePrizeData(prizeImage) }}/> 
     </div> 
    ) 
    } 
} 

function mapStateToProps (state, props) { 
    return { 
    } 
} 

function mapDispatchToProps (dispatch, props) { 
    return bindActionCreators(ActionCreators, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(CreatePrizeFormContainer) 

Answer 1

関数への参照を渡すと（例：引数として、または他の代入として）、そのコンテキストにバインドされません。

これはthis.progressCallback引数の場合である：progressCallback引数変数はあなたがそのようにそれを渡していても、thisにリンクされていないこと

this.props.handleNewPrizeImageUpload(this.progressCallback, ...) 

- 誤解の多くの原因です。あなただけではありません。

次のようにそれを解決：

this.props.handleNewPrizeImageUpload(this.progressCallback.bind(this), ...) 

は、この上に非常に良いQ&Aを参照してください。ここで

あなたのコードの一部が動作しスニペットまでトリミングです：

"strict" 
 
// Dummy Component class for this snippet only 
 
class Component { constructor (props) { this.props = props } } 
 
// Your class: 
 
class CreatePrizeFormContainer extends Component { 
 
    constructor (props) { super(props) } 
 
    handlePrizeData (prizeImage) { 
 
    this.props.handleNewPrizeImageUpload(
 
     this.progressCallback.bind(this), 
 
     this.imageUploadCompletionCallback.bind(this), prizeImage) 
 
    } 
 
    progressCallback (progress) { 
 
    console.log('Upload is ' + progress + '% done') 
 
    this.someOtherFunction(progress) 
 
    } 
 
    imageUploadCompletionCallback (url) { 
 
    console.log('SAVE TO FIREBASE RAN SUCCESFULLY RETURNED IMAGE URL : ', url) 
 
    } 
 
    someOtherFunction (progress) { console.log('HAHAHA') } 
 
} 
 
// Dummy savePrizeImage function for this snippet only 
 
function savePrizeImage(progressCallback, imageUploadCompletionCallback, ImageFile) { 
 
    // Simulate two progress events 
 
    setTimeout(function() { progressCallback(50) }, 0) 
 
    setTimeout(function() { progressCallback(100) }, 500) 
 
    setTimeout(function() { imageUploadCompletionCallback('http://example.com') }, 510) 
 
} 
 
// Create instance, passing simple prop literal 
 
var obj = new CreatePrizeFormContainer({ 
 
    handleNewPrizeImageUpload: function(progressCallback, 
 
             imageUploadCompletionCallback, ImageFile) { 
 
    savePrizeImage(progressCallback, imageUploadCompletionCallback, ImageFile) 
 
    } 
 
}) 
 
obj.handlePrizeData('dummyPrizeImage.img') // Call handlePrizeData